@intlayer/design-system 3.5.0 → 3.5.3
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.
- package/dist/Form-BDcoNTLV.cjs.map +1 -1
- package/dist/Form-DhsgC7kB.js.map +1 -1
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/components/Auth/AuthModal/index.cjs.map +1 -1
- package/dist/components/Auth/AuthModal/index.mjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/AuthenticationBarrierClient.cjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/AuthenticationBarrierClient.mjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/AuthenticationBarrierServer.cjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/AuthenticationBarrierServer.mjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/accessValidation.cjs.map +1 -1
- package/dist/components/Auth/AuthenticationBarrier/accessValidation.mjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/ChangePasswordForm.cjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/ChangePasswordForm.mjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/ChangePasswordSchema.cjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/ChangePasswordSchema.mjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/index.content.cjs.map +1 -1
- package/dist/components/Auth/ChangePasswordForm/index.content.d.ts +10 -10
- package/dist/components/Auth/ChangePasswordForm/index.content.mjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/ExternalsLoginButtons.cjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/ExternalsLoginButtons.mjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/assets/GoogleLogo.cjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/assets/GoogleLogo.mjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.cjs.map +1 -1
- package/dist/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.d.ts +5 -5
- package/dist/components/Auth/ExternalsLoginButtons/externalsLoginButtons.content.mjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/ResetPasswordForm.cjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/ResetPasswordForm.mjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/ResetPasswordSchema.cjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/ResetPasswordSchema.mjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/index.content.cjs.map +1 -1
- package/dist/components/Auth/ResetPasswordForm/index.content.d.ts +7 -7
- package/dist/components/Auth/ResetPasswordForm/index.content.mjs.map +1 -1
- package/dist/components/Auth/SignInForm/SignInForm.cjs.map +1 -1
- package/dist/components/Auth/SignInForm/SignInForm.mjs.map +1 -1
- package/dist/components/Auth/SignInForm/SignInSchema.cjs.map +1 -1
- package/dist/components/Auth/SignInForm/SignInSchema.mjs.map +1 -1
- package/dist/components/Auth/SignInForm/index.content.cjs.map +1 -1
- package/dist/components/Auth/SignInForm/index.content.d.ts +13 -13
- package/dist/components/Auth/SignInForm/index.content.mjs.map +1 -1
- package/dist/components/Auth/SignUpForm/SignUpForm.cjs.map +1 -1
- package/dist/components/Auth/SignUpForm/SignUpForm.mjs.map +1 -1
- package/dist/components/Auth/SignUpForm/SignUpSchema.cjs.map +1 -1
- package/dist/components/Auth/SignUpForm/SignUpSchema.mjs.map +1 -1
- package/dist/components/Auth/SignUpForm/index.content.cjs.map +1 -1
- package/dist/components/Auth/SignUpForm/index.content.d.ts +11 -11
- package/dist/components/Auth/SignUpForm/index.content.mjs.map +1 -1
- package/dist/components/Auth/useAuth/index.cjs.map +1 -1
- package/dist/components/Auth/useAuth/index.mjs.map +1 -1
- package/dist/components/Auth/useAuth/useCSRF.cjs.map +1 -1
- package/dist/components/Auth/useAuth/useCSRF.mjs.map +1 -1
- package/dist/components/Auth/useAuth/useOAuth2.cjs.map +1 -1
- package/dist/components/Auth/useAuth/useOAuth2.mjs.map +1 -1
- package/dist/components/Auth/useAuth/useSession.cjs.map +1 -1
- package/dist/components/Auth/useAuth/useSession.mjs.map +1 -1
- package/dist/components/Auth/useUser/index.cjs.map +1 -1
- package/dist/components/Auth/useUser/index.mjs.map +1 -1
- package/dist/components/Avatar/index.cjs.map +1 -1
- package/dist/components/Avatar/index.mjs.map +1 -1
- package/dist/components/Badge/index.cjs.map +1 -1
- package/dist/components/Badge/index.mjs.map +1 -1
- package/dist/components/Breadcrumb/index.cjs.map +1 -1
- package/dist/components/Breadcrumb/index.mjs.map +1 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.mjs.map +1 -1
- package/dist/components/Command/index.cjs.map +1 -1
- package/dist/components/Command/index.mjs.map +1 -1
- package/dist/components/Container/index.cjs.map +1 -1
- package/dist/components/Container/index.mjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditor.cjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditor.mjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorTextArea.cjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorTextArea.mjs.map +1 -1
- package/dist/components/CopyToClipboard/index.cjs.map +1 -1
- package/dist/components/CopyToClipboard/index.mjs.map +1 -1
- package/dist/components/DictionaryEditor/DictionaryEditor.cjs.map +1 -1
- package/dist/components/DictionaryEditor/DictionaryEditor.mjs.map +1 -1
- package/dist/components/DictionaryEditor/ItemLayout.cjs.map +1 -1
- package/dist/components/DictionaryEditor/ItemLayout.mjs.map +1 -1
- package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.cjs.map +1 -1
- package/dist/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs.map +1 -1
- package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.cjs.map +1 -1
- package/dist/components/DictionaryEditor/ValidDictionaryChangeButtons.mjs.map +1 -1
- package/dist/components/DictionaryEditor/useEditedContentStore.cjs.map +1 -1
- package/dist/components/DictionaryEditor/useEditedContentStore.mjs.map +1 -1
- package/dist/components/DictionaryEditor/useEditionPanelStore.cjs.map +1 -1
- package/dist/components/DictionaryEditor/useEditionPanelStore.mjs.map +1 -1
- package/dist/components/DictionaryEditor/validDictionaryChangeButtons.content.cjs.map +1 -1
- package/dist/components/DictionaryEditor/validDictionaryChangeButtons.content.mjs.map +1 -1
- package/dist/components/DictionaryEditor/validDictionaryChangeButtonsSchema.cjs.map +1 -1
- package/dist/components/DictionaryEditor/validDictionaryChangeButtonsSchema.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionariesSelector/DictionariesSelector.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionariesSelector/dictionariesSelector.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionariesSelector/dictionariesSelector.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryFormSchema.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryFormSchema.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsSchema.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsSchema.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/dictionaryDetails.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryDetails/dictionaryDetails.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EditorView/EditorView.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EditorView/EditorView.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EditorView/TextEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EditorView/TextEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EnumKeyInput.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/EnumKeyInput.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/JSONEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/JSONEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/KeyPathBreadcrumb.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NodeEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NodeEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NodeTypeSelector.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NodeTypeSelector.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveFormSchema.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveFormSchema.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/saveForm.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/saveForm.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/dictionaryFieldEditor.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/dictionaryFieldEditor.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/editorView.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/editorView.content.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/getIsEditableSection.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/getIsEditableSection.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/nodeTypeSelector.content.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/nodeTypeSelector.content.mjs.map +1 -1
- package/dist/components/DropDown/index.cjs.map +1 -1
- package/dist/components/DropDown/index.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldInput.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldInput.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldLayout.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldLayout.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldTextArea.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldTextArea.mjs.map +1 -1
- package/dist/components/Footer/index.cjs.map +1 -1
- package/dist/components/Footer/index.mjs.map +1 -1
- package/dist/components/Form/FormBase.cjs.map +1 -1
- package/dist/components/Form/FormBase.mjs.map +1 -1
- package/dist/components/Form/FormControl.cjs.map +1 -1
- package/dist/components/Form/FormControl.mjs.map +1 -1
- package/dist/components/Form/FormDescription.cjs.map +1 -1
- package/dist/components/Form/FormDescription.mjs.map +1 -1
- package/dist/components/Form/FormField.cjs.map +1 -1
- package/dist/components/Form/FormField.mjs.map +1 -1
- package/dist/components/Form/FormItem.cjs.map +1 -1
- package/dist/components/Form/FormItem.mjs.map +1 -1
- package/dist/components/Form/FormLabel.cjs.map +1 -1
- package/dist/components/Form/FormLabel.mjs.map +1 -1
- package/dist/components/Form/FormMessage.cjs.map +1 -1
- package/dist/components/Form/FormMessage.mjs.map +1 -1
- package/dist/components/Form/elements/FormElementWrapper.cjs.map +1 -1
- package/dist/components/Form/elements/FormElementWrapper.mjs.map +1 -1
- package/dist/components/Form/layout/FormLabelLayout.cjs.map +1 -1
- package/dist/components/Form/layout/FormLabelLayout.mjs.map +1 -1
- package/dist/components/Headers/SectionScroller.cjs.map +1 -1
- package/dist/components/Headers/SectionScroller.mjs.map +1 -1
- package/dist/components/Headers/index.cjs.map +1 -1
- package/dist/components/Headers/index.mjs.map +1 -1
- package/dist/components/IDE/CodeRender.cjs.map +1 -1
- package/dist/components/IDE/CodeRender.mjs.map +1 -1
- package/dist/components/IDE/FileList.cjs.map +1 -1
- package/dist/components/IDE/FileList.mjs.map +1 -1
- package/dist/components/IDE/FileTree.cjs.map +1 -1
- package/dist/components/IDE/FileTree.mjs.map +1 -1
- package/dist/components/IDE/IDE.cjs +1 -1
- package/dist/components/IDE/IDE.cjs.map +1 -1
- package/dist/components/IDE/IDE.mjs +1 -1
- package/dist/components/IDE/IDE.mjs.map +1 -1
- package/dist/components/IDE/MarkDownRender.cjs.map +1 -1
- package/dist/components/IDE/MarkDownRender.mjs.map +1 -1
- package/dist/components/IDE/createFileTree.cjs.map +1 -1
- package/dist/components/IDE/createFileTree.mjs.map +1 -1
- package/dist/components/Input/Checkbox.cjs.map +1 -1
- package/dist/components/Input/Checkbox.mjs.map +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.mjs.map +1 -1
- package/dist/components/Input/InputPassword.cjs.map +1 -1
- package/dist/components/Input/InputPassword.mjs.map +1 -1
- package/dist/components/Link/Link.cjs +11 -4
- package/dist/components/Link/Link.cjs.map +1 -1
- package/dist/components/Link/Link.d.ts +2 -1
- package/dist/components/Link/Link.d.ts.map +1 -1
- package/dist/components/Link/Link.mjs +11 -4
- package/dist/components/Link/Link.mjs.map +1 -1
- package/dist/components/Loader/spinner.cjs.map +1 -1
- package/dist/components/Loader/spinner.mjs.map +1 -1
- package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.cjs.map +1 -1
- package/dist/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs.map +1 -1
- package/dist/components/Logo/LogoCircle.cjs.map +1 -1
- package/dist/components/Logo/LogoCircle.mjs.map +1 -1
- package/dist/components/Logo/LogoNoFrame.cjs.map +1 -1
- package/dist/components/Logo/LogoNoFrame.mjs.map +1 -1
- package/dist/components/Logo/LogoSquare.cjs.map +1 -1
- package/dist/components/Logo/LogoSquare.mjs.map +1 -1
- package/dist/components/Logo/LogoSquircle.cjs.map +1 -1
- package/dist/components/Logo/LogoSquircle.mjs.map +1 -1
- package/dist/components/Logo/LogoTextOnly.cjs.map +1 -1
- package/dist/components/Logo/LogoTextOnly.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowCircle.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowCircle.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowNoFrame.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowNoFrame.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowSquircle.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextBelowSquircle.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextCircle.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextCircle.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextNoFrame.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextNoFrame.mjs.map +1 -1
- package/dist/components/Logo/LogoWithTextSquircle.cjs.map +1 -1
- package/dist/components/Logo/LogoWithTextSquircle.mjs.map +1 -1
- package/dist/components/Logo/index.cjs.map +1 -1
- package/dist/components/Logo/index.mjs.map +1 -1
- package/dist/components/MarkDownRender/index.cjs +9 -1
- package/dist/components/MarkDownRender/index.cjs.map +1 -1
- package/dist/components/MarkDownRender/index.d.ts.map +1 -1
- package/dist/components/MarkDownRender/index.mjs +9 -1
- package/dist/components/MarkDownRender/index.mjs.map +1 -1
- package/dist/components/MaxHeightSmoother/index.cjs.map +1 -1
- package/dist/components/MaxHeightSmoother/index.mjs.map +1 -1
- package/dist/components/MaxWidthSmoother/index.cjs.map +1 -1
- package/dist/components/MaxWidthSmoother/index.mjs.map +1 -1
- package/dist/components/Modal/Modal.cjs.map +1 -1
- package/dist/components/Modal/Modal.mjs.map +1 -1
- package/dist/components/Navbar/Burger.cjs.map +1 -1
- package/dist/components/Navbar/Burger.mjs.map +1 -1
- package/dist/components/Navbar/DesktopNavbar.cjs.map +1 -1
- package/dist/components/Navbar/DesktopNavbar.mjs.map +1 -1
- package/dist/components/Navbar/MobileNavbar.cjs.map +1 -1
- package/dist/components/Navbar/MobileNavbar.mjs.map +1 -1
- package/dist/components/Navbar/index.cjs.map +1 -1
- package/dist/components/Navbar/index.mjs.map +1 -1
- package/dist/components/Navbar/useNavigation.cjs.map +1 -1
- package/dist/components/Navbar/useNavigation.mjs.map +1 -1
- package/dist/components/Pattern/DotPattern.cjs.map +1 -1
- package/dist/components/Pattern/DotPattern.mjs.map +1 -1
- package/dist/components/Pattern/GridPattern.cjs.map +1 -1
- package/dist/components/Pattern/GridPattern.mjs.map +1 -1
- package/dist/components/Pattern/SpotLight.cjs.map +1 -1
- package/dist/components/Pattern/SpotLight.mjs.map +1 -1
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.mjs.map +1 -1
- package/dist/components/PressableSpan/PressableSpan.cjs.map +1 -1
- package/dist/components/PressableSpan/PressableSpan.mjs.map +1 -1
- package/dist/components/ProfileDropDown/index.cjs.map +1 -1
- package/dist/components/ProfileDropDown/index.mjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.cjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.mjs.map +1 -1
- package/dist/components/RightDrawer/useRightDrawerStore.cjs.map +1 -1
- package/dist/components/RightDrawer/useRightDrawerStore.mjs.map +1 -1
- package/dist/components/Select/Multiselect.cjs.map +1 -1
- package/dist/components/Select/Multiselect.mjs.map +1 -1
- package/dist/components/Select/Select.cjs.map +1 -1
- package/dist/components/Select/Select.mjs.map +1 -1
- package/dist/components/SwitchSelector/index.cjs.map +1 -1
- package/dist/components/SwitchSelector/index.mjs.map +1 -1
- package/dist/components/TabSelector/TabSelector.cjs.map +1 -1
- package/dist/components/TabSelector/TabSelector.mjs.map +1 -1
- package/dist/components/Tag/index.cjs.map +1 -1
- package/dist/components/Tag/index.mjs.map +1 -1
- package/dist/components/TextArea/AutoSizeTextArea.cjs.map +1 -1
- package/dist/components/TextArea/AutoSizeTextArea.mjs.map +1 -1
- package/dist/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.cjs.map +1 -1
- package/dist/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map +1 -1
- package/dist/components/ThemeSwitcherDropDown/MobileThemeSwitcher.cjs.map +1 -1
- package/dist/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map +1 -1
- package/dist/components/Toaster/Toast.cjs.map +1 -1
- package/dist/components/Toaster/Toast.mjs.map +1 -1
- package/dist/components/Toaster/Toaster.cjs.map +1 -1
- package/dist/components/Toaster/Toaster.mjs.map +1 -1
- package/dist/components/Toaster/useToast.cjs.map +1 -1
- package/dist/components/Toaster/useToast.mjs.map +1 -1
- package/dist/components/WithResizer/index.cjs.map +1 -1
- package/dist/components/WithResizer/index.mjs.map +1 -1
- package/dist/hooks/intlayerAPIHooks.cjs.map +1 -1
- package/dist/hooks/intlayerAPIHooks.mjs.map +1 -1
- package/dist/hooks/useAsync/useAsync.cjs.map +1 -1
- package/dist/hooks/useAsync/useAsync.mjs.map +1 -1
- package/dist/hooks/useAsync/useAsyncStateStore.cjs.map +1 -1
- package/dist/hooks/useAsync/useAsyncStateStore.mjs.map +1 -1
- package/dist/hooks/useDevice.cjs.map +1 -1
- package/dist/hooks/useDevice.mjs.map +1 -1
- package/dist/hooks/useGetAllDictionaries.cjs.map +1 -1
- package/dist/hooks/useGetAllDictionaries.mjs.map +1 -1
- package/dist/hooks/useGetElementOrWindow.cjs.map +1 -1
- package/dist/hooks/useIntlayerAPI.cjs.map +1 -1
- package/dist/hooks/useIntlayerAPI.mjs.map +1 -1
- package/dist/hooks/useIsMounted.cjs.map +1 -1
- package/dist/hooks/useIsMounted.mjs.map +1 -1
- package/dist/hooks/useItemSelector.cjs.map +1 -1
- package/dist/hooks/useItemSelector.mjs.map +1 -1
- package/dist/hooks/usePersistedStore.cjs.map +1 -1
- package/dist/hooks/usePersistedStore.mjs.map +1 -1
- package/dist/hooks/useScrollBlockage/index.cjs.map +1 -1
- package/dist/hooks/useScrollBlockage/index.mjs.map +1 -1
- package/dist/hooks/useScrollBlockage/useScrollBlockageStore.cjs.map +1 -1
- package/dist/hooks/useScrollBlockage/useScrollBlockageStore.mjs.map +1 -1
- package/dist/hooks/useScrollDetection.cjs.map +1 -1
- package/dist/hooks/useScrollDetection.mjs.map +1 -1
- package/dist/index-BtZWYJhL.cjs.map +1 -1
- package/dist/index-D9oaKvKC.js.map +1 -1
- package/dist/jsx-runtime-DaNGiM0W.js.map +1 -1
- package/dist/jsx-runtime-XHKiWCTo.cjs.map +1 -1
- package/dist/libs/intlayer-api/auth.cjs.map +1 -1
- package/dist/libs/intlayer-api/auth.mjs.map +1 -1
- package/dist/libs/intlayer-api/dictionary.cjs.map +1 -1
- package/dist/libs/intlayer-api/dictionary.mjs.map +1 -1
- package/dist/libs/intlayer-api/fetcher.cjs.map +1 -1
- package/dist/libs/intlayer-api/fetcher.mjs.map +1 -1
- package/dist/libs/intlayer-api/organization.cjs.map +1 -1
- package/dist/libs/intlayer-api/organization.mjs.map +1 -1
- package/dist/libs/intlayer-api/project.cjs.map +1 -1
- package/dist/libs/intlayer-api/project.mjs.map +1 -1
- package/dist/libs/intlayer-api/stripe.cjs.map +1 -1
- package/dist/libs/intlayer-api/stripe.mjs.map +1 -1
- package/dist/libs/intlayer-api/user.cjs.map +1 -1
- package/dist/libs/intlayer-api/user.mjs.map +1 -1
- package/dist/shallow-lhDIFtEp.cjs.map +1 -1
- package/dist/shallow-m9BpCkKh.js.map +1 -1
- package/dist/tailwind.config.cjs.map +1 -1
- package/dist/tailwind.config.mjs.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/utils/camelCase.cjs.map +1 -1
- package/dist/utils/camelCase.mjs.map +1 -1
- package/dist/utils/capitalize.cjs.map +1 -1
- package/dist/utils/capitalize.mjs.map +1 -1
- package/dist/utils/dictionary.cjs.map +1 -1
- package/dist/utils/dictionary.mjs.map +1 -1
- package/dist/utils/isElementAtTopAndNotCovered.cjs.map +1 -1
- package/dist/utils/isElementAtTopAndNotCovered.mjs.map +1 -1
- package/dist/utils/object.cjs.map +1 -1
- package/dist/utils/object.mjs.map +1 -1
- package/dist/zod-BV4nCGJE.js.map +1 -1
- package/dist/zod-DSrtTSD_.cjs.map +1 -1
- package/package.json +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PressableSpan.cjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n onPress: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n (isSelectingProp ?? isSelectingState)\n ? 'outline-inherit'\n : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAASA,kBAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,
|
|
1
|
+
{"version":3,"file":"PressableSpan.cjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n onPress: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n (isSelectingProp ?? isSelectingState)\n ? 'outline-inherit'\n : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAASA,kBAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,WAAAA,SAAS,eAAe;AAClE,QAAA,gBAAgBD,kBAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACf,aAAA;AAAA,EACX;AAEA,QAAM,kBAAkB,MAAM;AACd,kBAAA,UAAU,WAAW,MAAM;AACrB,wBAAA;AAAA,OACjB,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,kBAAkB,MAAM;AACZ,oBAAA;AACA,oBAAA;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AACV,oBAAA;AAAA,EAClB;AAGA,QAAM,qBAAqBE,WAAA;AAAA,IACzB,CAAC,UAAsB;AACjB,UAAA,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACZ,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEAC,aAAAA,UAAU,MAAM;AAEL,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEF,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EAAA,GACC,CAAC,kBAAkB,CAAC;AAEjB,QAAA,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IAAA;AAAA,EAEtB;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAA;AAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n onPress: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n (isSelectingProp ?? isSelectingState)\n ? 'outline-inherit'\n : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"names":["jsx"],"mappings":";;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AAClE,QAAA,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACf;
|
|
1
|
+
{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n useEffect,\n useState,\n useRef,\n useCallback,\n type FC,\n type MouseEventHandler,\n type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n onPress: () => void;\n onClickOutside?: () => void;\n pressDuration?: number;\n isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n children,\n onPress: onSelect,\n onClickOutside: onUnselect,\n pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n isSelecting: isSelectingProp,\n ...props\n}) => {\n const divRef = useRef<HTMLDivElement>(null);\n const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const handleOnLongPress = () => {\n setIsSelectingState(true);\n onSelect();\n };\n\n const startPressTimer = () => {\n pressTimerRef.current = setTimeout(() => {\n handleOnLongPress();\n }, pressDuration);\n };\n\n const clearPressTimer = () => {\n if (pressTimerRef.current) {\n clearTimeout(pressTimerRef.current);\n pressTimerRef.current = null;\n }\n };\n\n const handleMouseDown = () => {\n clearPressTimer(); // Ensure any previous timer is cleared\n startPressTimer();\n };\n\n const handleMouseUp = () => {\n clearPressTimer();\n };\n\n // Use useCallback to ensure the function identity remains stable\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (divRef.current && !divRef.current.contains(event.target as Node)) {\n setIsSelectingState(false);\n onUnselect?.();\n }\n },\n [onUnselect]\n );\n\n useEffect(() => {\n // Attach click outside listener\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n // Cleanup\n document.removeEventListener('mousedown', handleClickOutside);\n // clearPressTimer(); // Ensure to clear the timer when component unmounts\n };\n }, [handleClickOutside]);\n\n const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n if (isSelectingState) {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleOnBlur = () => {\n // Stop editing when the element loses focus\n setIsSelectingState(false);\n };\n\n return (\n <span\n className={cn(\n 'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n (isSelectingProp ?? isSelectingState)\n ? 'outline-inherit'\n : 'hover:outline-inherit'\n )}\n role=\"button\"\n tabIndex={0}\n onKeyUp={() => null}\n onClick={handleOnClick}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseLeave={handleMouseUp}\n onTouchStart={handleMouseDown}\n onTouchEnd={handleMouseUp}\n onTouchCancel={handleMouseUp}\n onBlur={handleOnBlur}\n ref={divRef}\n {...props}\n >\n {children}\n </span>\n );\n};\n"],"names":["jsx"],"mappings":";;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AAClE,QAAA,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACf,aAAA;AAAA,EACX;AAEA,QAAM,kBAAkB,MAAM;AACd,kBAAA,UAAU,WAAW,MAAM;AACrB,wBAAA;AAAA,OACjB,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,kBAAkB,MAAM;AACZ,oBAAA;AACA,oBAAA;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AACV,oBAAA;AAAA,EAClB;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACjB,UAAA,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACZ,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AAEL,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEF,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EAAA,GACC,CAAC,kBAAkB,CAAC;AAEjB,QAAA,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IAAA;AAAA,EAEtB;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n children,\n ...props\n}) => (\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <Avatar {...props} />\n </DropDown.Trigger>\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isFocusable\n isOverable\n align=\"end\"\n >\n <Container className=\"min-w-[100px] p-6\">{children}</Container>\n </DropDown.Panel>\n </DropDown>\n);\n"],"names":["jsxs","DropDown","jsx","Avatar","Container"],"mappings":";;;;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,2BAAAA,kBAAAA,IAAAD,0BAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACC,2BAAAA,kBAAAA,IAAAC,wBAAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAD,2BAAA,kBAAA;AAAA,IAACD,0BAAAA,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACC,2BAAA,kBAAA,IAAAE,2BAAA,WAAA,EAAU,WAAU,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n children,\n ...props\n}) => (\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <Avatar {...props} />\n </DropDown.Trigger>\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isFocusable\n isOverable\n align=\"end\"\n >\n <Container className=\"min-w-[100px] p-6\">{children}</Container>\n </DropDown.Panel>\n </DropDown>\n);\n"],"names":["jsxs","DropDown","jsx","Avatar","Container"],"mappings":";;;;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,2BAAAA,kBAAAA,IAAAD,0BAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACC,2BAAAA,kBAAAA,IAAAC,wBAAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAD,2BAAA,kBAAA;AAAA,IAACD,0BAAAA,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACC,2BAAA,kBAAA,IAAAE,2BAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n children,\n ...props\n}) => (\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <Avatar {...props} />\n </DropDown.Trigger>\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isFocusable\n isOverable\n align=\"end\"\n >\n <Container className=\"min-w-[100px] p-6\">{children}</Container>\n </DropDown.Panel>\n </DropDown>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,kCAAA,KAAC,UAAS,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,kCAAAA,IAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACA,kCAAAA,IAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAA,kCAAA;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACA,kCAAA,IAAA,WAAA,EAAU,WAAU,qBAAqB,
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n children,\n ...props\n}) => (\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <Avatar {...props} />\n </DropDown.Trigger>\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isFocusable\n isOverable\n align=\"end\"\n >\n <Container className=\"min-w-[100px] p-6\">{children}</Container>\n </DropDown.Panel>\n </DropDown>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,kCAAA,KAAC,UAAS,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,kCAAAA,IAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACA,kCAAAA,IAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAA,kCAAA;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACA,kCAAA,IAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type ReactNode,\n type FC,\n useEffect,\n useRef,\n type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n // Check if click is outside the drawer panel\n const isClickOutside = !panelRef.current.contains(event.target as Node);\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (isClickAble && isClickOutside && isAtTopAndVisible) {\n close();\n onClose?.();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <button\n className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n onClick={backButton.onBack}\n >\n <ChevronLeft />\n {backButton?.text}\n </button>\n )}\n </div>\n <X className=\"ml-auto cursor-pointer\" onClick={close} />\n </div>\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex-1\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","ChevronLeft","X"],"mappings":";;;;;;;;;;;;;AAoCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAaA,gBAAA,UAAU,IAAI;AAC7B,QAAA,WAAWC,kBAAuB,IAAI;AACtC,QAAA,uBAAuBA,kBAAuB,IAAI;AACxD,QAAM,EAAE,OAAO,MAAM,OAAW,IAAAC,2CAAA;AAAA,IAC9BC,QAAA,WAAW,CAAC,OAAO;AAAA,MACjB,OAAO,MAAM,EAAE,MAAM,UAAU;AAAA,MAC/B,MAAM,MAAM,EAAE,KAAK,UAAU;AAAA,MAC7B,QAAQ,EAAE,OAAO,UAAU;AAAA,IAAA,EAC3B;AAAA,
|
|
1
|
+
{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type ReactNode,\n type FC,\n useEffect,\n useRef,\n type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n // Check if click is outside the drawer panel\n const isClickOutside = !panelRef.current.contains(event.target as Node);\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (isClickAble && isClickOutside && isAtTopAndVisible) {\n close();\n onClose?.();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <button\n className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n onClick={backButton.onBack}\n >\n <ChevronLeft />\n {backButton?.text}\n </button>\n )}\n </div>\n <X className=\"ml-auto cursor-pointer\" onClick={close} />\n </div>\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex-1\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","ChevronLeft","X"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type ReactNode,\n type FC,\n useEffect,\n useRef,\n type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n // Check if click is outside the drawer panel\n const isClickOutside = !panelRef.current.contains(event.target as Node);\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (isClickAble && isClickOutside && isAtTopAndVisible) {\n close();\n onClose?.();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <button\n className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n onClick={backButton.onBack}\n >\n <ChevronLeft />\n {backButton?.text}\n </button>\n )}\n </div>\n <X className=\"ml-auto cursor-pointer\" onClick={close} />\n </div>\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex-1\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":["jsx","jsxs"],"mappings":";;;;;;;;;;;AAoCO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AAC7B,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,uBAAuB,OAAuB,IAAI;AACxD,QAAM,EAAE,OAAO,MAAM,OAAW,IAAA;AAAA,IAC9B,WAAW,CAAC,OAAO;AAAA,MACjB,OAAO,MAAM,EAAE,MAAM,UAAU;AAAA,MAC/B,MAAM,MAAM,EAAE,KAAK,UAAU;AAAA,MAC7B,QAAQ,EAAE,OAAO,UAAU;AAAA,IAAA,EAC3B;AAAA,
|
|
1
|
+
{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type ReactNode,\n type FC,\n useEffect,\n useRef,\n type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n // Check if click is outside the drawer panel\n const isClickOutside = !panelRef.current.contains(event.target as Node);\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (isClickAble && isClickOutside && isAtTopAndVisible) {\n close();\n onClose?.();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <button\n className=\"flex cursor-pointer flex-row items-center gap-1 text-left\"\n onClick={backButton.onBack}\n >\n <ChevronLeft />\n {backButton?.text}\n </button>\n )}\n </div>\n <X className=\"ml-auto cursor-pointer\" onClick={close} />\n </div>\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex-1\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":["jsx","jsxs"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRightDrawerStore.cjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n drawers: Record<string, boolean>;\n open: (key: string) => void;\n close: (key: string) => void;\n isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n drawers: {},\n open: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: true,\n },\n })),\n close: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: false,\n },\n })),\n isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":["create"],"mappings":";;;AASO,MAAM,sBAAsBA,QAAA,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAC;AAAA,EACV,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,
|
|
1
|
+
{"version":3,"file":"useRightDrawerStore.cjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n drawers: Record<string, boolean>;\n open: (key: string) => void;\n close: (key: string) => void;\n isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n drawers: {},\n open: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: true,\n },\n })),\n close: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: false,\n },\n })),\n isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":["create"],"mappings":";;;AASO,MAAM,sBAAsBA,QAAA,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAC;AAAA,EACV,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,IAAM,EAAA,QAAQ,GAAG,KAAK;AACjD,EAAE;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRightDrawerStore.mjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n drawers: Record<string, boolean>;\n open: (key: string) => void;\n close: (key: string) => void;\n isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n drawers: {},\n open: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: true,\n },\n })),\n close: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: false,\n },\n })),\n isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":[],"mappings":";AASO,MAAM,sBAAsB,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAC;AAAA,EACV,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,
|
|
1
|
+
{"version":3,"file":"useRightDrawerStore.mjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n drawers: Record<string, boolean>;\n open: (key: string) => void;\n close: (key: string) => void;\n isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n drawers: {},\n open: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: true,\n },\n })),\n close: (key: string) =>\n set((state) => ({\n drawers: {\n ...state.drawers,\n [key]: false,\n },\n })),\n isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":[],"mappings":";AASO,MAAM,sBAAsB,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAC;AAAA,EACV,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,IAAM,EAAA,QAAQ,GAAG,KAAK;AACjD,EAAE;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) ||\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext.Provider value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-muted-foreground ring-2'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n * <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n * <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","forwardRef","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Multiselect.cjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) ||\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext.Provider value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-muted-foreground ring-2'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n * <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n * <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["createContext","useContext","useState","useRef","useEffect","useCallback","useMemo","jsx","CommandRoot","cn","forwardRef","jsxs","Badge","RemoveIcon","Command","Check"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) ||\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext.Provider value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-muted-foreground ring-2'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n * <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n * <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["jsx","jsxs","RemoveIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Multiselect.mjs","sources":["../../../src/components/Select/Multiselect.tsx"],"sourcesContent":["/* eslint-disable sonarjs/no-nested-conditional */\n/* eslint-disable sonarjs/cognitive-complexity */\n'use client';\n\nimport { X as RemoveIcon, Check } from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type Dispatch,\n type ElementRef,\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEventHandler,\n type RefObject,\n type SetStateAction,\n type SyntheticEvent,\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Badge } from '../Badge';\nimport { Command, CommandRoot } from '../Command';\n\ntype MultiSelectContextProps = {\n value: string[];\n onValueChange: (value: string) => void;\n open: boolean;\n setOpen: (value: boolean) => void;\n inputValue: string;\n setInputValue: Dispatch<SetStateAction<string>>;\n activeIndex: number;\n setActiveIndex: Dispatch<SetStateAction<number>>;\n ref: RefObject<HTMLInputElement>;\n handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;\n};\n\nconst MultiSelectContext = createContext<MultiSelectContextProps | null>(null);\n\nconst useMultiSelect = () => {\n const context = useContext(MultiSelectContext);\n if (!context) {\n throw new Error('useMultiSelect must be used within MultiSelectProvider');\n }\n return context;\n};\n\n/**\n * MultiSelect Docs: {@link: https://shadcn-extension.vercel.app/docs/multi-select}\n */\n\ntype MultiSelectProps = ComponentPropsWithoutRef<typeof CommandRoot> & {\n values?: string[];\n defaultValues?: string[];\n onValueChange?: (value: string[]) => void;\n loop?: boolean;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelectTrigger>\n * <MultiSelectInput placeholder=\"Select your framework\" />\n * </MultiSelectTrigger>\n * <MultiSelectContent>\n * <MultiSelectList>\n * <MultiSelectItem value={\"React\"}>React</MultiSelectItem>\n * <MultiSelectItem value={\"Vue\"}>Vue</MultiSelectItem>\n * <MultiSelectItem value={\"Svelte\"}>Svelte</MultiSelectItem>\n * </MultiSelectList>\n * </MultiSelectContent>\n * </MultiSelect>\n * ```\n */\nconst MultiSelectRoot: FC<MultiSelectProps> = ({\n values: valuesProp,\n defaultValues,\n onValueChange: onValueChange,\n loop = false,\n className,\n children,\n dir,\n ...props\n}) => {\n const [value, setValue] = useState<string[]>(defaultValues ?? []);\n const [inputValue, setInputValue] = useState('');\n const [open, setOpen] = useState<boolean>(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const inputRef = useRef<HTMLInputElement>(null);\n const [isValueSelected, setIsValueSelected] = useState(false);\n const [selectedValue, setSelectedValue] = useState('');\n\n useEffect(() => {\n if (valuesProp) {\n setValue(valuesProp);\n }\n }, [valuesProp]);\n\n const onValueChangeHandler = useCallback(\n (val: string) => {\n if (value.includes(val)) {\n const newValue = value.filter((item) => item !== val);\n setValue(newValue);\n onValueChange?.(newValue);\n } else {\n const newValue = [...value, val];\n setValue(newValue);\n onValueChange?.(newValue);\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value]\n );\n\n const handleSelect = useCallback(\n (e: SyntheticEvent<HTMLInputElement>) => {\n e.preventDefault();\n const target = e.currentTarget;\n const selection = target.value.substring(\n target.selectionStart ?? 0,\n target.selectionEnd ?? 0\n );\n\n setSelectedValue(selection);\n setIsValueSelected(selection === inputValue);\n },\n [inputValue]\n );\n\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n e.stopPropagation();\n const target = inputRef.current;\n\n if (!target) return;\n\n const moveNext = () => {\n const nextIndex = activeIndex + 1;\n setActiveIndex(\n nextIndex > value.length - 1 ? (loop ? 0 : -1) : nextIndex\n );\n };\n\n const movePrev = () => {\n const prevIndex = activeIndex - 1;\n setActiveIndex(prevIndex < 0 ? value.length - 1 : prevIndex);\n };\n\n const moveCurrent = () => {\n const newIndex =\n activeIndex - 1 <= 0\n ? value.length - 1 === 0\n ? -1\n : 0\n : activeIndex - 1;\n setActiveIndex(newIndex);\n };\n\n switch (e.key) {\n case 'ArrowLeft':\n if (dir === 'rtl') {\n if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n } else if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n break;\n\n case 'ArrowRight':\n if (dir === 'rtl') {\n if (value.length > 0 && target.selectionStart === 0) {\n movePrev();\n }\n } else if (value.length > 0 && (activeIndex !== -1 || loop)) {\n moveNext();\n }\n break;\n\n case 'Backspace':\n case 'Delete':\n if (value.length > 0) {\n if (activeIndex !== -1 && activeIndex < value.length) {\n onValueChangeHandler(value[activeIndex]);\n moveCurrent();\n } else if (\n (target.selectionStart === 0 && selectedValue === inputValue) ||\n isValueSelected\n ) {\n onValueChangeHandler(value[value.length - 1]);\n }\n }\n break;\n\n case 'Enter':\n setOpen(true);\n break;\n\n case 'Escape':\n if (activeIndex !== -1) {\n setActiveIndex(-1);\n } else if (open) {\n setOpen(false);\n }\n break;\n }\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [value, inputValue, activeIndex, loop]\n );\n\n const memoValue = useMemo(\n () => ({\n value,\n onValueChange: onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n ref: inputRef,\n handleSelect,\n }),\n [\n value,\n onValueChangeHandler,\n open,\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n inputRef,\n handleSelect,\n ]\n );\n\n return (\n <MultiSelectContext.Provider value={memoValue}>\n <CommandRoot\n onKeyDown={handleKeyDown}\n className={cn(\n 'flex w-full flex-col gap-2 overflow-visible bg-transparent',\n className\n )}\n dir={dir}\n {...props}\n >\n {children}\n </CommandRoot>\n </MultiSelectContext.Provider>\n );\n};\n\nconst MultiSelectTrigger = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement> & {\n getBadgeValue?: (value: string) => string;\n validationStyleEnabled?: boolean;\n }\n>(\n (\n {\n className,\n getBadgeValue = (value) => value,\n validationStyleEnabled = false,\n children,\n ...props\n },\n ref\n ) => {\n const { value, onValueChange, activeIndex } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLButtonElement> =\n useCallback((e) => {\n e.preventDefault();\n e.stopPropagation();\n }, []);\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex w-full flex-col gap-3 rounded-lg p-1 py-2',\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {value.length > 0 && (\n <div className=\"flex w-full flex-wrap gap-1\">\n {value.map((item, index) => (\n <Badge\n key={item}\n className={cn(\n 'flex items-center gap-1 rounded-xl px-1',\n activeIndex === index && 'ring-muted-foreground ring-2'\n )}\n color=\"text\"\n >\n <span className=\"text-xs\">{getBadgeValue(item)}</span>\n <button\n aria-label={`Remove ${item} option`}\n aria-roledescription=\"button to remove option\"\n onMouseDown={mousePreventDefault}\n onClick={() => onValueChange(item)}\n >\n <span className=\"sr-only\">Remove {item} option</span>\n <RemoveIcon className=\"size-4 cursor-pointer\" />\n </button>\n </Badge>\n ))}\n </div>\n )}\n {children}\n </div>\n );\n }\n);\n\nMultiSelectTrigger.displayName = 'MultiSelectTrigger';\n\nconst MultiSelectInput: FC<ComponentPropsWithoutRef<typeof Command.Input>> = ({\n className,\n ...props\n}) => {\n const {\n setOpen,\n inputValue,\n setInputValue,\n activeIndex,\n setActiveIndex,\n handleSelect,\n ref: inputRef,\n } = useMultiSelect();\n\n return (\n <Command.Input\n {...props}\n tabIndex={0}\n ref={inputRef}\n value={inputValue}\n onValueChange={activeIndex === -1 ? setInputValue : undefined}\n onSelect={handleSelect}\n onBlur={() => setOpen(false)}\n onFocus={() => setOpen(true)}\n onClick={() => setActiveIndex(-1)}\n className={cn(\n 'ml-2 flex-1 cursor-pointer outline-none',\n className,\n activeIndex !== -1 && 'caret-transparent'\n )}\n />\n );\n};\n\nMultiSelectInput.displayName = 'MultiSelectInput';\n\nconst MultiSelectContent = forwardRef<\n HTMLDivElement,\n HTMLAttributes<HTMLDivElement>\n>(({ children }, ref) => {\n const { open } = useMultiSelect();\n return (\n <div ref={ref} className=\"relative\">\n {open && children}\n </div>\n );\n});\n\nMultiSelectContent.displayName = 'MultiSelectContent';\n\nconst MultiSelectList = forwardRef<\n ElementRef<typeof Command.List>,\n ComponentPropsWithoutRef<typeof Command.List>\n>(({ className, children }, ref) => (\n <Command.List\n ref={ref}\n className={cn(\n 'border-muted bg-input-background dark:bg-input-background-dark absolute top-0 z-10 flex w-full flex-col gap-2 rounded-lg border p-2 shadow-md transition-colors',\n className\n )}\n >\n {children}\n <Command.Empty>\n <span className=\"text-muted-foreground\">No results found</span>\n </Command.Empty>\n </Command.List>\n));\n\nMultiSelectList.displayName = 'MultiSelectList';\n\nconst MultiSelectItem = forwardRef<\n ElementRef<typeof Command.Item>,\n { value: string } & ComponentPropsWithoutRef<typeof Command.Item>\n>(({ className, value, children, ...props }, ref) => {\n const { value: Options, onValueChange, setInputValue } = useMultiSelect();\n\n const mousePreventDefault: MouseEventHandler<HTMLDivElement> = useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n []\n );\n\n const isIncluded = Options.includes(value);\n return (\n <Command.Item\n ref={ref}\n {...props}\n onSelect={() => {\n onValueChange(value);\n setInputValue('');\n }}\n className={cn(\n 'flex cursor-pointer justify-between rounded-lg px-2 py-1 transition-colors',\n 'hover:bg-neutral/10 dark:hover:bg-neutral-dark/10',\n className,\n isIncluded && 'opacity-50',\n props.disabled && 'cursor-not-allowed opacity-50'\n )}\n onMouseDown={mousePreventDefault}\n >\n {children}\n {isIncluded && <Check className=\"size-4\" />}\n </Command.Item>\n );\n});\n\nMultiSelectItem.displayName = 'MultiSelectItem';\n\ntype MultiSelectType = typeof MultiSelectRoot & {\n Trigger: typeof MultiSelectTrigger;\n Input: typeof MultiSelectInput;\n Content: typeof MultiSelectContent;\n List: typeof MultiSelectList;\n Item: typeof MultiSelectItem;\n};\n\n/**\n *\n * Usage example:\n * ```jsx\n * <MultiSelect\n * values={value}\n * onValuesChange={setValue}\n * loop\n * >\n * <MultiSelect.Trigger>\n * <MultiSelect.Input placeholder=\"Select your framework\" />\n * </MultiSelect.Trigger>\n * <MultiSelect.Content>\n * <MultiSelect.List>\n * <MultiSelect.Item value={\"React\"}>React</MultiSelect.Item>\n * <MultiSelect.Item value={\"Vue\"}>Vue</MultiSelect.Item>\n * <MultiSelect.Item value={\"Svelte\"}>Svelte</MultiSelect.Item>\n * </MultiSelect.List>\n * </MultiSelect.Content>\n * </MultiSelect>\n * ```\n */\nexport const MultiSelect = MultiSelectRoot as MultiSelectType;\nMultiSelect.Trigger = MultiSelectTrigger;\nMultiSelect.Input = MultiSelectInput;\nMultiSelect.Content = MultiSelectContent;\nMultiSelect.List = MultiSelectList;\nMultiSelect.Item = MultiSelectItem;\n"],"names":["jsx","jsxs","RemoveIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Theme\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">Light</Select.Item>\n * <Select.Item value=\"dark\">Dark</Select.Item>\n * <Select.Item value=\"system\">System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["SelectPrimitive","forwardRef","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Theme\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">Light</Select.Item>\n * <Select.Item value=\"dark\">Dark</Select.Item>\n * <Select.Item value=\"system\">System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["SelectPrimitive","forwardRef","jsxs","cn","jsx","ChevronsUpDown","ChevronUpIcon","ChevronDownIcon","CheckIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Theme\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">Light</Select.Item>\n * <Select.Item value=\"dark\">Dark</Select.Item>\n * <Select.Item value=\"system\">System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["jsxs","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.mjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport {\n ChevronsUpDown,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from 'lucide-react';\nimport {\n type ComponentPropsWithoutRef,\n type ElementRef,\n forwardRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst SelectRoot = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = forwardRef<\n ElementRef<typeof SelectPrimitive.Trigger>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {\n validationStyleEnabled?: boolean;\n }\n>(({ validationStyleEnabled = false, className, children, ...props }, ref) => (\n <SelectPrimitive.Trigger\n ref={ref}\n className={cn(\n 'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 px-2 py-1 text-sm shadow-none outline-0 transition-all',\n 'border-input-border dark:border-input-border-dark hover:border-input-border-hover dark:hover:border-input-border-hover-dark focus:border-input-border-focus dark:focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n 'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n validationStyleEnabled &&\n 'valid:border-success dark:valid:border-success-dark invalid:border-error dark:invalid:border-error-dark',\n className\n )}\n {...props}\n >\n {children}\n <SelectPrimitive.Icon asChild>\n <ChevronsUpDown className=\"size-4 opacity-50\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollUpButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronUpIcon />\n </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = forwardRef<\n ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.ScrollDownButton\n ref={ref}\n className={cn(\n 'flex cursor-default items-center justify-center py-1',\n className\n )}\n {...props}\n >\n <ChevronDownIcon />\n </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\nexport const SelectContent = forwardRef<\n ElementRef<typeof SelectPrimitive.Content>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = 'popper', ...props }, ref) => (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n ref={ref}\n className={cn(\n 'bg-input-background dark:bg-input-background-dark text-input-text dark:text-input-text-dark w-full select-text resize-none rounded-xl border-2 p-1 text-sm shadow-none outline-0 transition-all',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden border shadow-md',\n position === 'popper' &&\n 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n className\n )}\n position={position}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n 'p-1',\n position === 'popper' &&\n 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport const SelectLabel = forwardRef<\n ElementRef<typeof SelectPrimitive.Label>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Label\n ref={ref}\n className={cn('px-1 py-0.5 text-sm font-semibold', className)}\n {...props}\n />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = forwardRef<\n ElementRef<typeof SelectPrimitive.Item>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n <SelectPrimitive.Item\n ref={ref}\n className={cn(\n 'focus:bg-neutral/10 dark:focus:bg-neutral-dark/10 relative flex w-full cursor-pointer select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const SelectSeparator = forwardRef<\n ElementRef<typeof SelectPrimitive.Separator>,\n ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <SelectPrimitive.Separator\n ref={ref}\n className={cn('-mx-1 my-1 h-px bg-red-300', className)}\n {...props}\n />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\ntype SelectType = typeof SelectRoot & {\n Group: typeof SelectGroup;\n Value: typeof SelectValue;\n Trigger: typeof SelectTrigger;\n ScrollUpButton: typeof SelectScrollUpButton;\n ScrollDownButton: typeof SelectScrollDownButton;\n Content: typeof SelectContent;\n Label: typeof SelectLabel;\n Item: typeof SelectItem;\n Separator: typeof SelectSeparator;\n};\n\n/**\n * Usage example:\n * ```jsx\n * <Select>\n * <Select.Trigger>\n * <Select.Value placeholder=\"Theme\" />\n * </Select.Trigger>\n * <Select.Content>\n * <Select.Item value=\"light\">Light</Select.Item>\n * <Select.Item value=\"dark\">Dark</Select.Item>\n * <Select.Item value=\"system\">System</Select.Item>\n * </Select.Content>\n * </Select>\n * ```\n */\nexport const Select = SelectRoot as SelectType;\nSelect.Group = SelectGroup;\nSelect.Value = SelectValue;\nSelect.Trigger = SelectTrigger;\nSelect.ScrollUpButton = SelectScrollUpButton;\nSelect.ScrollDownButton = SelectScrollDownButton;\nSelect.Content = SelectContent;\nSelect.Label = SelectLabel;\nSelect.Item = SelectItem;\nSelect.Separator = SelectSeparator;\n"],"names":["jsxs","jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement | null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' || typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,iBAAiD;AAAA,EACrD,EAAE,SAAS,OAAO,OAAO,MAAM;AAAA,EAC/B,EAAE,SAAS,MAAM,OAAO,KAAK;AAC/B;AAWA,MAAM,wBAAwBA,uBAAA;AAAA,EAC5B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useRef, type ReactNode, type HTMLAttributes, useState } from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\ntype SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nconst switchSelectorVariant = cva(\n 'flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n primary:\n 'border-primary text-primary dark:border-primary-dark dark:text-primary-dark',\n secondary:\n 'border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark',\n destructive:\n 'border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark',\n neutral:\n 'border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark',\n light: 'border-white text-white',\n dark: 'border-neutral-800 text-neutral-800',\n text: 'border-text text-text dark:border-text-dark dark:text-text-dark',\n },\n },\n defaultVariants: {\n color: 'primary',\n },\n }\n);\n\nconst choiceVariant = cva(\n 'z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text',\n {\n variants: {\n size: {\n sm: 'py-1 px-2 text-xs',\n md: 'p-2 text-sm',\n lg: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n primary:\n 'bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark',\n secondary:\n 'bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark',\n destructive:\n 'bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark',\n neutral:\n 'bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text',\n light: 'bg-white aria-selected:text-black',\n dark: 'bg-neutral-800 aria-selected:text-white',\n text: 'bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text',\n },\n },\n }\n);\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = 'primary',\n size = 'md',\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement | null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' || typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"names":["cva","useState","useRef","useItemSelector","jsx","jsxs","value","createElement","cn"],"mappings":"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"}
|