@intlayer/design-system 6.1.5 → 6.1.6
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/.vite/manifest.json +13 -9
- package/dist/Form-CriPBaZk.js.map +1 -1
- package/dist/Form-DJrUK3mm.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.cjs +51 -15
- package/dist/components/Accordion/Accordion.cjs.map +1 -1
- package/dist/components/Accordion/Accordion.d.ts +44 -5
- package/dist/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/components/Accordion/Accordion.mjs +52 -16
- package/dist/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/components/Avatar/index.cjs +114 -31
- package/dist/components/Avatar/index.cjs.map +1 -1
- package/dist/components/Avatar/index.d.ts +46 -2
- package/dist/components/Avatar/index.d.ts.map +1 -1
- package/dist/components/Avatar/index.mjs +115 -32
- package/dist/components/Avatar/index.mjs.map +1 -1
- package/dist/components/Badge/index.cjs +88 -9
- package/dist/components/Badge/index.cjs.map +1 -1
- package/dist/components/Badge/index.d.ts +80 -2
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.mjs +89 -10
- package/dist/components/Badge/index.mjs.map +1 -1
- package/dist/components/Breadcrumb/index.cjs +124 -59
- package/dist/components/Breadcrumb/index.cjs.map +1 -1
- package/dist/components/Breadcrumb/index.d.ts +89 -5
- package/dist/components/Breadcrumb/index.d.ts.map +1 -1
- package/dist/components/Breadcrumb/index.mjs +124 -59
- package/dist/components/Breadcrumb/index.mjs.map +1 -1
- package/dist/components/Button/Button.cjs +44 -25
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +95 -1
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.mjs +44 -25
- package/dist/components/Button/Button.mjs.map +1 -1
- package/dist/components/ClickOutsideDiv/index.cjs +38 -7
- package/dist/components/ClickOutsideDiv/index.cjs.map +1 -1
- package/dist/components/ClickOutsideDiv/index.d.ts +13 -0
- package/dist/components/ClickOutsideDiv/index.d.ts.map +1 -1
- package/dist/components/ClickOutsideDiv/index.mjs +39 -8
- package/dist/components/ClickOutsideDiv/index.mjs.map +1 -1
- package/dist/components/Container/index.cjs +2 -0
- package/dist/components/Container/index.cjs.map +1 -1
- package/dist/components/Container/index.d.ts +42 -0
- package/dist/components/Container/index.d.ts.map +1 -1
- package/dist/components/Container/index.mjs +2 -0
- package/dist/components/Container/index.mjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditor.cjs +80 -33
- package/dist/components/ContentEditor/ContentEditor.cjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditor.d.ts +29 -0
- package/dist/components/ContentEditor/ContentEditor.d.ts.map +1 -1
- package/dist/components/ContentEditor/ContentEditor.mjs +80 -33
- package/dist/components/ContentEditor/ContentEditor.mjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorInput.cjs +58 -31
- package/dist/components/ContentEditor/ContentEditorInput.cjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorInput.d.ts +33 -0
- package/dist/components/ContentEditor/ContentEditorInput.d.ts.map +1 -1
- package/dist/components/ContentEditor/ContentEditorInput.mjs +58 -31
- package/dist/components/ContentEditor/ContentEditorInput.mjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorTextArea.cjs +58 -30
- package/dist/components/ContentEditor/ContentEditorTextArea.cjs.map +1 -1
- package/dist/components/ContentEditor/ContentEditorTextArea.d.ts +35 -0
- package/dist/components/ContentEditor/ContentEditorTextArea.d.ts.map +1 -1
- package/dist/components/ContentEditor/ContentEditorTextArea.mjs +59 -31
- package/dist/components/ContentEditor/ContentEditorTextArea.mjs.map +1 -1
- package/dist/components/ContentEditor/index.cjs +4 -0
- package/dist/components/ContentEditor/index.cjs.map +1 -1
- package/dist/components/ContentEditor/index.d.ts +2 -0
- package/dist/components/ContentEditor/index.d.ts.map +1 -1
- package/dist/components/ContentEditor/index.mjs +5 -1
- package/dist/components/ContentEditor/index.mjs.map +1 -1
- package/dist/components/ContentSelector/ContentSelector.cjs +9 -1
- package/dist/components/ContentSelector/ContentSelector.cjs.map +1 -1
- package/dist/components/ContentSelector/ContentSelector.d.ts +167 -0
- package/dist/components/ContentSelector/ContentSelector.d.ts.map +1 -1
- package/dist/components/ContentSelector/ContentSelector.mjs +9 -1
- package/dist/components/ContentSelector/ContentSelector.mjs.map +1 -1
- package/dist/components/CopyButton/index.cjs +23 -8
- package/dist/components/CopyButton/index.cjs.map +1 -1
- package/dist/components/CopyButton/index.d.ts +78 -0
- package/dist/components/CopyButton/index.d.ts.map +1 -1
- package/dist/components/CopyButton/index.mjs +23 -8
- package/dist/components/CopyButton/index.mjs.map +1 -1
- package/dist/components/CopyToClipboard/index.cjs +58 -22
- package/dist/components/CopyToClipboard/index.cjs.map +1 -1
- package/dist/components/CopyToClipboard/index.d.ts +68 -2
- package/dist/components/CopyToClipboard/index.d.ts.map +1 -1
- package/dist/components/CopyToClipboard/index.mjs +59 -23
- package/dist/components/CopyToClipboard/index.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs +4 -2
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.d.ts +1 -0
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.d.ts.map +1 -1
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +4 -2
- package/dist/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs +2 -2
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +2 -2
- package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs +3 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.cjs.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.d.ts +1 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.d.ts.map +1 -1
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +3 -0
- package/dist/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs.map +1 -1
- package/dist/components/DropDown/index.cjs +6 -4
- package/dist/components/DropDown/index.cjs.map +1 -1
- package/dist/components/DropDown/index.d.ts +92 -15
- package/dist/components/DropDown/index.d.ts.map +1 -1
- package/dist/components/DropDown/index.mjs +6 -4
- package/dist/components/DropDown/index.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldInput.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldInput.d.ts +38 -0
- package/dist/components/EditableField/EditableFieldInput.d.ts.map +1 -1
- package/dist/components/EditableField/EditableFieldInput.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldLayout.cjs +10 -2
- package/dist/components/EditableField/EditableFieldLayout.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldLayout.d.ts.map +1 -1
- package/dist/components/EditableField/EditableFieldLayout.mjs +10 -2
- package/dist/components/EditableField/EditableFieldLayout.mjs.map +1 -1
- package/dist/components/EditableField/EditableFieldTextArea.cjs.map +1 -1
- package/dist/components/EditableField/EditableFieldTextArea.d.ts +42 -0
- package/dist/components/EditableField/EditableFieldTextArea.d.ts.map +1 -1
- package/dist/components/EditableField/EditableFieldTextArea.mjs.map +1 -1
- package/dist/components/ExpandCollapse/ExpandCollapse.cjs.map +1 -1
- package/dist/components/ExpandCollapse/ExpandCollapse.d.ts +58 -0
- package/dist/components/ExpandCollapse/ExpandCollapse.d.ts.map +1 -1
- package/dist/components/ExpandCollapse/ExpandCollapse.mjs.map +1 -1
- package/dist/components/Footer/index.cjs.map +1 -1
- package/dist/components/Footer/index.d.ts +101 -0
- package/dist/components/Footer/index.d.ts.map +1 -1
- package/dist/components/Footer/index.mjs.map +1 -1
- package/dist/components/Form/elements/MultiselectElement.d.ts.map +1 -1
- package/dist/components/Form/elements/SelectElement.d.ts.map +1 -1
- package/dist/components/Form/elements/SwitchSelectorElement.d.ts.map +1 -1
- package/dist/components/Headers/index.cjs.map +1 -1
- package/dist/components/Headers/index.d.ts +69 -2
- package/dist/components/Headers/index.d.ts.map +1 -1
- package/dist/components/Headers/index.mjs.map +1 -1
- package/dist/components/HeightResizer/index.cjs +10 -7
- package/dist/components/HeightResizer/index.cjs.map +1 -1
- package/dist/components/HeightResizer/index.d.ts +89 -0
- package/dist/components/HeightResizer/index.d.ts.map +1 -1
- package/dist/components/HeightResizer/index.mjs +10 -7
- package/dist/components/HeightResizer/index.mjs.map +1 -1
- package/dist/components/InformationTag/index.cjs.map +1 -1
- package/dist/components/InformationTag/index.d.ts +72 -0
- package/dist/components/InformationTag/index.d.ts.map +1 -1
- package/dist/components/InformationTag/index.mjs.map +1 -1
- package/dist/components/KeyboardScreenAdapter/index.cjs.map +1 -1
- package/dist/components/KeyboardScreenAdapter/index.d.ts +100 -0
- package/dist/components/KeyboardScreenAdapter/index.d.ts.map +1 -1
- package/dist/components/KeyboardScreenAdapter/index.mjs.map +1 -1
- package/dist/components/Label/index.cjs +25 -3
- package/dist/components/Label/index.cjs.map +1 -1
- package/dist/components/Label/index.d.ts +65 -1
- package/dist/components/Label/index.d.ts.map +1 -1
- package/dist/components/Label/index.mjs +26 -4
- package/dist/components/Label/index.mjs.map +1 -1
- package/dist/components/Link/Link.cjs +0 -4
- package/dist/components/Link/Link.cjs.map +1 -1
- package/dist/components/Link/Link.d.ts +169 -0
- package/dist/components/Link/Link.d.ts.map +1 -1
- package/dist/components/Link/Link.mjs +0 -4
- package/dist/components/Link/Link.mjs.map +1 -1
- package/dist/components/Loader/index.cjs.map +1 -1
- package/dist/components/Loader/index.d.ts +82 -11
- package/dist/components/Loader/index.d.ts.map +1 -1
- package/dist/components/Loader/index.mjs.map +1 -1
- package/dist/components/Loader/spinner.cjs.map +1 -1
- package/dist/components/Loader/spinner.d.ts +56 -0
- package/dist/components/Loader/spinner.d.ts.map +1 -1
- package/dist/components/Loader/spinner.mjs.map +1 -1
- package/dist/components/MarkDownRender/MarkDownRender.cjs +0 -1
- package/dist/components/MarkDownRender/MarkDownRender.cjs.map +1 -1
- package/dist/components/MarkDownRender/MarkDownRender.d.ts +147 -0
- package/dist/components/MarkDownRender/MarkDownRender.d.ts.map +1 -1
- package/dist/components/MarkDownRender/MarkDownRender.mjs +0 -1
- package/dist/components/MarkDownRender/MarkDownRender.mjs.map +1 -1
- package/dist/components/MarkDownRender/processor.cjs +12 -9
- package/dist/components/MarkDownRender/processor.cjs.map +1 -1
- package/dist/components/MarkDownRender/processor.d.ts.map +1 -1
- package/dist/components/MarkDownRender/processor.mjs +12 -9
- package/dist/components/MarkDownRender/processor.mjs.map +1 -1
- package/dist/components/MaxHeightSmoother/index.cjs.map +1 -1
- package/dist/components/MaxHeightSmoother/index.d.ts +152 -0
- package/dist/components/MaxHeightSmoother/index.d.ts.map +1 -1
- package/dist/components/MaxHeightSmoother/index.mjs.map +1 -1
- package/dist/components/Modal/Modal.cjs +5 -0
- package/dist/components/Modal/Modal.cjs.map +1 -1
- package/dist/components/Modal/Modal.d.ts +81 -3
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.mjs +5 -0
- package/dist/components/Modal/Modal.mjs.map +1 -1
- package/dist/components/Navbar/Burger.cjs.map +1 -1
- package/dist/components/Navbar/Burger.d.ts +54 -0
- package/dist/components/Navbar/Burger.d.ts.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.d.ts +78 -0
- package/dist/components/Navbar/DesktopNavbar.d.ts.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.d.ts +88 -0
- package/dist/components/Navbar/MobileNavbar.d.ts.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.d.ts +69 -0
- package/dist/components/Navbar/index.d.ts.map +1 -1
- package/dist/components/Navbar/index.mjs.map +1 -1
- package/dist/components/Navbar/useNavigation.cjs +8 -1
- package/dist/components/Navbar/useNavigation.cjs.map +1 -1
- package/dist/components/Navbar/useNavigation.d.ts +83 -0
- package/dist/components/Navbar/useNavigation.d.ts.map +1 -1
- package/dist/components/Navbar/useNavigation.mjs +8 -1
- package/dist/components/Navbar/useNavigation.mjs.map +1 -1
- package/dist/components/Pattern/DotPattern.cjs.map +1 -1
- package/dist/components/Pattern/DotPattern.d.ts +101 -0
- package/dist/components/Pattern/DotPattern.d.ts.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.d.ts +114 -0
- package/dist/components/Pattern/GridPattern.d.ts.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.d.ts +125 -0
- package/dist/components/Pattern/SpotLight.d.ts.map +1 -1
- package/dist/components/Pattern/SpotLight.mjs.map +1 -1
- package/dist/components/Popover/index.cjs +10 -10
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.d.ts +110 -15
- package/dist/components/Popover/index.d.ts.map +1 -1
- package/dist/components/Popover/index.mjs +10 -10
- package/dist/components/Popover/index.mjs.map +1 -1
- package/dist/components/PressableSpan/PressableSpan.cjs +22 -5
- package/dist/components/PressableSpan/PressableSpan.cjs.map +1 -1
- package/dist/components/PressableSpan/PressableSpan.d.ts +105 -3
- package/dist/components/PressableSpan/PressableSpan.d.ts.map +1 -1
- package/dist/components/PressableSpan/PressableSpan.mjs +22 -5
- package/dist/components/PressableSpan/PressableSpan.mjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.cjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.d.ts +182 -0
- package/dist/components/RightDrawer/RightDrawer.d.ts.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.mjs.map +1 -1
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.cjs.map +1 -1
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.d.ts +44 -0
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.d.ts.map +1 -1
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.mjs.map +1 -1
- package/dist/components/RightDrawer/useRightDrawerStore.cjs.map +1 -1
- package/dist/components/RightDrawer/useRightDrawerStore.d.ts +102 -0
- package/dist/components/RightDrawer/useRightDrawerStore.d.ts.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.d.ts +125 -18
- package/dist/components/Select/Multiselect.d.ts.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.d.ts +214 -7
- package/dist/components/Select/Select.d.ts.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.d.ts +157 -8
- package/dist/components/SwitchSelector/index.d.ts.map +1 -1
- package/dist/components/SwitchSelector/index.mjs.map +1 -1
- package/dist/components/Table/Table.cjs.map +1 -1
- package/dist/components/Table/Table.d.ts +184 -0
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.mjs.map +1 -1
- package/dist/components/Tag/index.cjs.map +1 -1
- package/dist/components/Tag/index.d.ts +223 -0
- package/dist/components/Tag/index.d.ts.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.d.ts +91 -0
- package/dist/components/TextArea/AutoSizeTextArea.d.ts.map +1 -1
- package/dist/components/TextArea/AutoSizeTextArea.mjs.map +1 -1
- package/dist/components/TextArea/AutocompleteTextArea.cjs.map +1 -1
- package/dist/components/TextArea/AutocompleteTextArea.d.ts +145 -0
- package/dist/components/TextArea/AutocompleteTextArea.d.ts.map +1 -1
- package/dist/components/TextArea/AutocompleteTextArea.mjs.map +1 -1
- package/dist/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/components/TextArea/TextArea.d.ts +74 -0
- package/dist/components/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/components/Toaster/Toast.cjs +4 -0
- package/dist/components/Toaster/Toast.cjs.map +1 -1
- package/dist/components/Toaster/Toast.d.ts +148 -2
- package/dist/components/Toaster/Toast.d.ts.map +1 -1
- package/dist/components/Toaster/Toast.mjs +4 -0
- package/dist/components/Toaster/Toast.mjs.map +1 -1
- package/dist/components/Toaster/Toaster.cjs.map +1 -1
- package/dist/components/Toaster/Toaster.d.ts +42 -0
- package/dist/components/Toaster/Toaster.d.ts.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.d.ts +199 -2
- package/dist/components/Toaster/useToast.d.ts.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.d.ts +143 -0
- package/dist/components/WithResizer/index.d.ts.map +1 -1
- package/dist/components/WithResizer/index.mjs.map +1 -1
- package/dist/components/index.cjs +2 -2
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.mjs +4 -4
- package/dist/components/index.mjs.map +1 -1
- package/dist/hooks/auth.cjs +2 -2
- package/dist/hooks/auth.cjs.map +1 -1
- package/dist/hooks/auth.mjs +2 -2
- package/dist/hooks/auth.mjs.map +1 -1
- package/dist/hooks/reactQuery.cjs +2 -1
- package/dist/hooks/reactQuery.cjs.map +1 -1
- package/dist/hooks/reactQuery.d.ts +1 -1
- package/dist/hooks/reactQuery.d.ts.map +1 -1
- package/dist/hooks/reactQuery.mjs +2 -1
- package/dist/hooks/reactQuery.mjs.map +1 -1
- package/dist/hooks/useAuth/useOAuth2.cjs +3 -3
- package/dist/hooks/useAuth/useOAuth2.cjs.map +1 -1
- package/dist/hooks/useAuth/useOAuth2.mjs +3 -3
- package/dist/hooks/useAuth/useOAuth2.mjs.map +1 -1
- package/dist/hooks/useAuth/useSession.cjs +3 -3
- package/dist/hooks/useAuth/useSession.cjs.map +1 -1
- package/dist/hooks/useAuth/useSession.mjs +3 -3
- package/dist/hooks/useAuth/useSession.mjs.map +1 -1
- package/dist/utils/image.cjs +30 -0
- package/dist/utils/image.cjs.map +1 -0
- package/dist/utils/image.d.ts +37 -0
- package/dist/utils/image.d.ts.map +1 -0
- package/dist/utils/image.mjs +30 -0
- package/dist/utils/image.mjs.map +1 -0
- package/package.json +20 -18
- package/dist/utils/capitalize.cjs +0 -10
- package/dist/utils/capitalize.cjs.map +0 -1
- package/dist/utils/capitalize.d.ts +0 -2
- package/dist/utils/capitalize.d.ts.map +0 -1
- package/dist/utils/capitalize.mjs +0 -10
- package/dist/utils/capitalize.mjs.map +0 -1
|
@@ -1,15 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const utils_cn = require("../../utils/cn.cjs");
|
|
4
5
|
const Label = ({
|
|
5
6
|
htmlFor,
|
|
7
|
+
required = false,
|
|
8
|
+
disabled = false,
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
6
11
|
...props
|
|
7
|
-
}) => /* @__PURE__ */ jsxRuntime.
|
|
12
|
+
}) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8
13
|
"label",
|
|
9
14
|
{
|
|
10
|
-
className:
|
|
15
|
+
className: utils_cn.cn(
|
|
16
|
+
"text-sm font-medium leading-none select-none",
|
|
17
|
+
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
18
|
+
disabled && "cursor-not-allowed opacity-70 text-muted-foreground",
|
|
19
|
+
className
|
|
20
|
+
),
|
|
11
21
|
htmlFor,
|
|
12
|
-
...props
|
|
22
|
+
...props,
|
|
23
|
+
children: [
|
|
24
|
+
children,
|
|
25
|
+
required && /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
|
+
"span",
|
|
27
|
+
{
|
|
28
|
+
className: "text-destructive ml-1",
|
|
29
|
+
"aria-label": "required",
|
|
30
|
+
title: "This field is required",
|
|
31
|
+
children: "*"
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
]
|
|
13
35
|
}
|
|
14
36
|
);
|
|
15
37
|
exports.Label = Label;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\n\nexport const Label: FC<
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n /**\n * The ID of the form control this label is associated with.\n * This creates the accessible relationship between the label and its control.\n * @example \"email-input\"\n * @example \"password-field\"\n */\n htmlFor?: string;\n\n /**\n * Whether the associated form control is required.\n * Adds visual indicator and updates ARIA attributes.\n * @default false\n */\n required?: boolean;\n\n /**\n * Whether the associated form control is disabled.\n * Updates styling to indicate disabled state.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Additional CSS classes for custom styling\n * @example \"text-red-600 font-bold\"\n */\n className?: string;\n}\n\n/**\n * Label Component\n *\n * A form label component that provides accessible labeling for form controls.\n * Establishes proper relationships between labels and their associated form elements\n * with visual indicators for required and disabled states.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Label htmlFor=\"email\">Email Address</Label>\n * <input id=\"email\" type=\"email\" />\n *\n * // Required field\n * <Label htmlFor=\"password\" required>Password</Label>\n * <input id=\"password\" type=\"password\" required />\n *\n * // Disabled field\n * <Label htmlFor=\"disabled-field\" disabled>Disabled Field</Label>\n * <input id=\"disabled-field\" type=\"text\" disabled />\n *\n * // With custom styling\n * <Label htmlFor=\"custom\" className=\"text-blue-600 font-semibold\">\n * Custom Styled Label\n * </Label>\n * ```\n *\n * @component\n * @accessibility\n * - Uses semantic HTML <label> element\n * - Properly associates with form controls via htmlFor/id relationship\n * - Supports click-to-focus behavior automatically\n * - Visual indicators for required and disabled states\n * - Screen reader compatible with proper ARIA relationships\n */\nexport const Label: FC<LabelProps> = ({\n htmlFor,\n required = false,\n disabled = false,\n className,\n children,\n ...props\n}) => (\n <label\n className={cn(\n 'text-sm font-medium leading-none select-none',\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n disabled && 'cursor-not-allowed opacity-70 text-muted-foreground',\n className\n )}\n htmlFor={htmlFor}\n {...props}\n >\n {children}\n {required && (\n <span\n className=\"text-destructive ml-1\"\n aria-label=\"required\"\n title=\"This field is required\"\n >\n *\n </span>\n )}\n </label>\n);\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAuEO,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,YACCC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAEJ;;"}
|
|
@@ -1,3 +1,67 @@
|
|
|
1
1
|
import { FC, LabelHTMLAttributes } from 'react';
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Props for the Label component
|
|
4
|
+
*/
|
|
5
|
+
export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
6
|
+
/**
|
|
7
|
+
* The ID of the form control this label is associated with.
|
|
8
|
+
* This creates the accessible relationship between the label and its control.
|
|
9
|
+
* @example "email-input"
|
|
10
|
+
* @example "password-field"
|
|
11
|
+
*/
|
|
12
|
+
htmlFor?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Whether the associated form control is required.
|
|
15
|
+
* Adds visual indicator and updates ARIA attributes.
|
|
16
|
+
* @default false
|
|
17
|
+
*/
|
|
18
|
+
required?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the associated form control is disabled.
|
|
21
|
+
* Updates styling to indicate disabled state.
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Additional CSS classes for custom styling
|
|
27
|
+
* @example "text-red-600 font-bold"
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Label Component
|
|
33
|
+
*
|
|
34
|
+
* A form label component that provides accessible labeling for form controls.
|
|
35
|
+
* Establishes proper relationships between labels and their associated form elements
|
|
36
|
+
* with visual indicators for required and disabled states.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* // Basic usage
|
|
41
|
+
* <Label htmlFor="email">Email Address</Label>
|
|
42
|
+
* <input id="email" type="email" />
|
|
43
|
+
*
|
|
44
|
+
* // Required field
|
|
45
|
+
* <Label htmlFor="password" required>Password</Label>
|
|
46
|
+
* <input id="password" type="password" required />
|
|
47
|
+
*
|
|
48
|
+
* // Disabled field
|
|
49
|
+
* <Label htmlFor="disabled-field" disabled>Disabled Field</Label>
|
|
50
|
+
* <input id="disabled-field" type="text" disabled />
|
|
51
|
+
*
|
|
52
|
+
* // With custom styling
|
|
53
|
+
* <Label htmlFor="custom" className="text-blue-600 font-semibold">
|
|
54
|
+
* Custom Styled Label
|
|
55
|
+
* </Label>
|
|
56
|
+
* ```
|
|
57
|
+
*
|
|
58
|
+
* @component
|
|
59
|
+
* @accessibility
|
|
60
|
+
* - Uses semantic HTML <label> element
|
|
61
|
+
* - Properly associates with form controls via htmlFor/id relationship
|
|
62
|
+
* - Supports click-to-focus behavior automatically
|
|
63
|
+
* - Visual indicators for required and disabled states
|
|
64
|
+
* - Screen reader compatible with proper ARIA relationships
|
|
65
|
+
*/
|
|
66
|
+
export declare const Label: FC<LabelProps>;
|
|
3
67
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAG1D;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CA6BhC,CAAC"}
|
|
@@ -1,13 +1,35 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "../../utils/cn.mjs";
|
|
2
3
|
const Label = ({
|
|
3
4
|
htmlFor,
|
|
5
|
+
required = false,
|
|
6
|
+
disabled = false,
|
|
7
|
+
className,
|
|
8
|
+
children,
|
|
4
9
|
...props
|
|
5
|
-
}) => /* @__PURE__ */
|
|
10
|
+
}) => /* @__PURE__ */ jsxs(
|
|
6
11
|
"label",
|
|
7
12
|
{
|
|
8
|
-
className:
|
|
13
|
+
className: cn(
|
|
14
|
+
"text-sm font-medium leading-none select-none",
|
|
15
|
+
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
16
|
+
disabled && "cursor-not-allowed opacity-70 text-muted-foreground",
|
|
17
|
+
className
|
|
18
|
+
),
|
|
9
19
|
htmlFor,
|
|
10
|
-
...props
|
|
20
|
+
...props,
|
|
21
|
+
children: [
|
|
22
|
+
children,
|
|
23
|
+
required && /* @__PURE__ */ jsx(
|
|
24
|
+
"span",
|
|
25
|
+
{
|
|
26
|
+
className: "text-destructive ml-1",
|
|
27
|
+
"aria-label": "required",
|
|
28
|
+
title: "This field is required",
|
|
29
|
+
children: "*"
|
|
30
|
+
}
|
|
31
|
+
)
|
|
32
|
+
]
|
|
11
33
|
}
|
|
12
34
|
);
|
|
13
35
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\n\nexport const Label: FC<
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../src/components/Label/index.tsx"],"sourcesContent":["import { type FC, type LabelHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Label component\n */\nexport interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n /**\n * The ID of the form control this label is associated with.\n * This creates the accessible relationship between the label and its control.\n * @example \"email-input\"\n * @example \"password-field\"\n */\n htmlFor?: string;\n\n /**\n * Whether the associated form control is required.\n * Adds visual indicator and updates ARIA attributes.\n * @default false\n */\n required?: boolean;\n\n /**\n * Whether the associated form control is disabled.\n * Updates styling to indicate disabled state.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Additional CSS classes for custom styling\n * @example \"text-red-600 font-bold\"\n */\n className?: string;\n}\n\n/**\n * Label Component\n *\n * A form label component that provides accessible labeling for form controls.\n * Establishes proper relationships between labels and their associated form elements\n * with visual indicators for required and disabled states.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Label htmlFor=\"email\">Email Address</Label>\n * <input id=\"email\" type=\"email\" />\n *\n * // Required field\n * <Label htmlFor=\"password\" required>Password</Label>\n * <input id=\"password\" type=\"password\" required />\n *\n * // Disabled field\n * <Label htmlFor=\"disabled-field\" disabled>Disabled Field</Label>\n * <input id=\"disabled-field\" type=\"text\" disabled />\n *\n * // With custom styling\n * <Label htmlFor=\"custom\" className=\"text-blue-600 font-semibold\">\n * Custom Styled Label\n * </Label>\n * ```\n *\n * @component\n * @accessibility\n * - Uses semantic HTML <label> element\n * - Properly associates with form controls via htmlFor/id relationship\n * - Supports click-to-focus behavior automatically\n * - Visual indicators for required and disabled states\n * - Screen reader compatible with proper ARIA relationships\n */\nexport const Label: FC<LabelProps> = ({\n htmlFor,\n required = false,\n disabled = false,\n className,\n children,\n ...props\n}) => (\n <label\n className={cn(\n 'text-sm font-medium leading-none select-none',\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n disabled && 'cursor-not-allowed opacity-70 text-muted-foreground',\n className\n )}\n htmlFor={htmlFor}\n {...props}\n >\n {children}\n {required && (\n <span\n className=\"text-destructive ml-1\"\n aria-label=\"required\"\n title=\"This field is required\"\n >\n *\n </span>\n )}\n </label>\n);\n"],"names":[],"mappings":";;AAuEO,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IAAA;AAAA,IAEF;AAAA,IACC,GAAG;AAAA,IAEH,UAAA;AAAA,MAAA;AAAA,MACA,YACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAW;AAAA,UACX,OAAM;AAAA,UACP,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const configuration = require("@intlayer/config/built");
|
|
5
4
|
const core = require("@intlayer/core");
|
|
6
5
|
const classVarianceAuthority = require("class-variance-authority");
|
|
7
6
|
const lucideReact = require("lucide-react");
|
|
@@ -103,18 +102,15 @@ const Link = (props) => {
|
|
|
103
102
|
href: hrefProp,
|
|
104
103
|
...otherProps
|
|
105
104
|
} = props;
|
|
106
|
-
const { internationalization } = configuration;
|
|
107
105
|
const isExternalLink = checkIsExternalLink(props);
|
|
108
106
|
const isChildrenString = typeof children === "string";
|
|
109
107
|
const rel = isExternalLink ? "noopener noreferrer nofollow" : void 0;
|
|
110
108
|
const target = isExternalLink ? "_blank" : "_self";
|
|
111
|
-
const hrefLang = locale ? locale === internationalization.defaultLocale ? "x-default" : locale : void 0;
|
|
112
109
|
const href = locale && hrefProp && !isExternalLink ? core.getLocalizedUrl(hrefProp, locale) : hrefProp;
|
|
113
110
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
114
111
|
"a",
|
|
115
112
|
{
|
|
116
113
|
href,
|
|
117
|
-
hrefLang,
|
|
118
114
|
"aria-label": label,
|
|
119
115
|
rel,
|
|
120
116
|
target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum LinkVariant {\n DEFAULT = 'default',\n INVISIBLE_LINK = 'invisible-link',\n BUTTON = 'button',\n BUTTON_OUTLINED = 'button-outlined',\n HOVERABLE = 'hoverable',\n}\n\nexport enum LinkColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n TEXT_INVERSE = 'text-inverse',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n DEFAULT = 'default',\n TRUE = 'true',\n FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n label: string;\n isExternalLink?: boolean;\n isActive?: boolean;\n locale?: LocalesValues;\n };\n\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n const { internationalization } = configuration;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const hrefLang = locale\n ? locale === internationalization.defaultLocale\n ? 'x-default'\n : locale\n : undefined;\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n hrefLang={hrefLang}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n /** Default underlined link with hover effects */\n DEFAULT = 'default',\n /** Link without visible underline or hover effects */\n INVISIBLE_LINK = 'invisible-link',\n /** Button-styled link with solid background */\n BUTTON = 'button',\n /** Button-styled link with outlined border */\n BUTTON_OUTLINED = 'button-outlined',\n /** Link with subtle hover background effect */\n HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n /** Primary brand color */\n PRIMARY = 'primary',\n /** Secondary brand color */\n SECONDARY = 'secondary',\n /** Destructive/danger color for critical actions */\n DESTRUCTIVE = 'destructive',\n /** Neutral/muted color for less prominent links */\n NEUTRAL = 'neutral',\n /** Light color for dark backgrounds */\n LIGHT = 'light',\n /** Dark color for light backgrounds */\n DARK = 'dark',\n /** Default text color */\n TEXT = 'text',\n /** Inverse text color for opposite backgrounds */\n TEXT_INVERSE = 'text-inverse',\n /** Error/red color for error states */\n ERROR = 'error',\n /** Success/green color for positive actions */\n SUCCESS = 'success',\n /** Custom color - no default styling applied */\n CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n /** Default underline behavior based on variant */\n DEFAULT = 'default',\n /** Always show underline */\n TRUE = 'true',\n /** Never show underline */\n FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n /**\n * Accessible label for screen readers (required)\n * Provides context about what the link does or where it leads\n * @example \"Navigate to home page\"\n */\n label: string;\n\n /**\n * Whether this link opens in a new tab/window\n * When true, adds target=\"_blank\" and security attributes\n * Auto-detected for URLs starting with http/https when undefined\n * @default undefined (auto-detect based on href)\n */\n isExternalLink?: boolean;\n\n /**\n * Whether this link represents the current page/active state\n * Adds aria-current=\"page\" for accessibility\n * @default false\n */\n isActive?: boolean;\n\n /**\n * Locale for internationalized URLs\n * When provided, URLs are automatically localized using Intlayer\n * @example 'fr', 'es', 'en'\n */\n locale?: LocalesValues;\n };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n * About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n * External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n * href=\"/signup\"\n * variant={LinkVariant.BUTTON}\n * color={LinkColor.PRIMARY}\n * label=\"Sign up for account\"\n * >\n * Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n * href=\"/products\"\n * locale=\"fr\"\n * label=\"Voir les produits\"\n * >\n * Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n * href=\"/dashboard\"\n * isActive={true}\n * variant={LinkVariant.HOVERABLE}\n * label=\"Current page: Dashboard\"\n * >\n * Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined","cva","getLocalizedUrl","jsxs","cn","jsx","ExternalLink"],"mappings":"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"}
|
|
@@ -1,42 +1,211 @@
|
|
|
1
1
|
import { LocalesValues } from '@intlayer/config/client';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { AnchorHTMLAttributes, DetailedHTMLProps, FC } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Visual style variants for Link component
|
|
6
|
+
*
|
|
7
|
+
* @enum {string}
|
|
8
|
+
*/
|
|
4
9
|
export declare enum LinkVariant {
|
|
10
|
+
/** Default underlined link with hover effects */
|
|
5
11
|
DEFAULT = "default",
|
|
12
|
+
/** Link without visible underline or hover effects */
|
|
6
13
|
INVISIBLE_LINK = "invisible-link",
|
|
14
|
+
/** Button-styled link with solid background */
|
|
7
15
|
BUTTON = "button",
|
|
16
|
+
/** Button-styled link with outlined border */
|
|
8
17
|
BUTTON_OUTLINED = "button-outlined",
|
|
18
|
+
/** Link with subtle hover background effect */
|
|
9
19
|
HOVERABLE = "hoverable"
|
|
10
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* Color theme variants for Link component
|
|
23
|
+
*
|
|
24
|
+
* @enum {string}
|
|
25
|
+
*/
|
|
11
26
|
export declare enum LinkColor {
|
|
27
|
+
/** Primary brand color */
|
|
12
28
|
PRIMARY = "primary",
|
|
29
|
+
/** Secondary brand color */
|
|
13
30
|
SECONDARY = "secondary",
|
|
31
|
+
/** Destructive/danger color for critical actions */
|
|
14
32
|
DESTRUCTIVE = "destructive",
|
|
33
|
+
/** Neutral/muted color for less prominent links */
|
|
15
34
|
NEUTRAL = "neutral",
|
|
35
|
+
/** Light color for dark backgrounds */
|
|
16
36
|
LIGHT = "light",
|
|
37
|
+
/** Dark color for light backgrounds */
|
|
17
38
|
DARK = "dark",
|
|
39
|
+
/** Default text color */
|
|
18
40
|
TEXT = "text",
|
|
41
|
+
/** Inverse text color for opposite backgrounds */
|
|
19
42
|
TEXT_INVERSE = "text-inverse",
|
|
43
|
+
/** Error/red color for error states */
|
|
20
44
|
ERROR = "error",
|
|
45
|
+
/** Success/green color for positive actions */
|
|
21
46
|
SUCCESS = "success",
|
|
47
|
+
/** Custom color - no default styling applied */
|
|
22
48
|
CUSTOM = "custom"
|
|
23
49
|
}
|
|
50
|
+
/**
|
|
51
|
+
* Underline style options for Link component
|
|
52
|
+
*
|
|
53
|
+
* @enum {string}
|
|
54
|
+
*/
|
|
24
55
|
export declare enum LinkUnderlined {
|
|
56
|
+
/** Default underline behavior based on variant */
|
|
25
57
|
DEFAULT = "default",
|
|
58
|
+
/** Always show underline */
|
|
26
59
|
TRUE = "true",
|
|
60
|
+
/** Never show underline */
|
|
27
61
|
FALSE = "false"
|
|
28
62
|
}
|
|
63
|
+
/**
|
|
64
|
+
* Class variance authority configuration for Link component styling
|
|
65
|
+
* Defines the visual appearance based on variant, color, and underline options
|
|
66
|
+
*/
|
|
29
67
|
export declare const linkVariants: (props?: ({
|
|
30
68
|
variant?: "button" | "default" | "invisible-link" | "hoverable" | "button-outlined" | null | undefined;
|
|
31
69
|
color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom" | null | undefined;
|
|
32
70
|
underlined?: boolean | LinkUnderlined.DEFAULT | null | undefined;
|
|
33
71
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
72
|
+
/**
|
|
73
|
+
* Props interface for the Link component
|
|
74
|
+
*
|
|
75
|
+
* @interface LinkProps
|
|
76
|
+
* @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}
|
|
77
|
+
* @extends {VariantProps<typeof linkVariants>}
|
|
78
|
+
*/
|
|
34
79
|
export type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {
|
|
80
|
+
/**
|
|
81
|
+
* Accessible label for screen readers (required)
|
|
82
|
+
* Provides context about what the link does or where it leads
|
|
83
|
+
* @example "Navigate to home page"
|
|
84
|
+
*/
|
|
35
85
|
label: string;
|
|
86
|
+
/**
|
|
87
|
+
* Whether this link opens in a new tab/window
|
|
88
|
+
* When true, adds target="_blank" and security attributes
|
|
89
|
+
* Auto-detected for URLs starting with http/https when undefined
|
|
90
|
+
* @default undefined (auto-detect based on href)
|
|
91
|
+
*/
|
|
36
92
|
isExternalLink?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Whether this link represents the current page/active state
|
|
95
|
+
* Adds aria-current="page" for accessibility
|
|
96
|
+
* @default false
|
|
97
|
+
*/
|
|
37
98
|
isActive?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* Locale for internationalized URLs
|
|
101
|
+
* When provided, URLs are automatically localized using Intlayer
|
|
102
|
+
* @example 'fr', 'es', 'en'
|
|
103
|
+
*/
|
|
38
104
|
locale?: LocalesValues;
|
|
39
105
|
};
|
|
106
|
+
/**
|
|
107
|
+
* Utility function to determine if a link should be treated as external
|
|
108
|
+
*
|
|
109
|
+
* @param props - Link component props containing href and isExternalLink
|
|
110
|
+
* @returns {boolean} True if the link should open externally
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```tsx
|
|
114
|
+
* checkIsExternalLink({ href: 'https://example.com' }) // true
|
|
115
|
+
* checkIsExternalLink({ href: '/internal-page' }) // false
|
|
116
|
+
* checkIsExternalLink({ href: '/page', isExternalLink: true }) // true
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
40
119
|
export declare const checkIsExternalLink: ({ href, isExternalLink: isExternalLinkProp, }: LinkProps) => boolean;
|
|
120
|
+
/**
|
|
121
|
+
* Link Component
|
|
122
|
+
*
|
|
123
|
+
* A versatile link component that handles both internal and external navigation
|
|
124
|
+
* with comprehensive internationalization support and multiple visual variants.
|
|
125
|
+
*
|
|
126
|
+
* ## Key Features
|
|
127
|
+
* - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles
|
|
128
|
+
* - **Color Themes**: Comprehensive color palette for different contexts and meanings
|
|
129
|
+
* - **External Link Detection**: Automatic detection and handling of external URLs
|
|
130
|
+
* - **Internationalization**: Built-in support for localized URLs via Intlayer
|
|
131
|
+
* - **Security**: Automatic security attributes for external links (noopener, noreferrer)
|
|
132
|
+
* - **Accessibility**: Full ARIA support with proper labels and current page indication
|
|
133
|
+
* - **Visual Feedback**: Hover effects, underline options, and active states
|
|
134
|
+
*
|
|
135
|
+
* ## Use Cases
|
|
136
|
+
* - Navigation within applications (internal links)
|
|
137
|
+
* - External links to other websites with security measures
|
|
138
|
+
* - Button-styled links for call-to-action scenarios
|
|
139
|
+
* - Subtle hoverable links for navigation menus
|
|
140
|
+
* - Multi-language website navigation with automatic URL localization
|
|
141
|
+
*
|
|
142
|
+
* ## Security Features
|
|
143
|
+
* External links automatically receive security attributes:
|
|
144
|
+
* - `rel="noopener noreferrer nofollow"` - Prevents security vulnerabilities
|
|
145
|
+
* - `target="_blank"` - Opens in new tab/window
|
|
146
|
+
* - External link icon indication for user clarity
|
|
147
|
+
*
|
|
148
|
+
* ## Internationalization
|
|
149
|
+
* When used with Intlayer, the component automatically:
|
|
150
|
+
* - Localizes internal URLs based on the current or specified locale
|
|
151
|
+
* - Sets appropriate `hrefLang` attributes for SEO
|
|
152
|
+
* - Maintains proper URL structure for multi-language sites
|
|
153
|
+
*
|
|
154
|
+
* @component
|
|
155
|
+
* @example
|
|
156
|
+
* ```tsx
|
|
157
|
+
* // Basic internal link
|
|
158
|
+
* <Link href="/about" label="Go to about page">
|
|
159
|
+
* About Us
|
|
160
|
+
* </Link>
|
|
161
|
+
*
|
|
162
|
+
* // External link with auto-detection
|
|
163
|
+
* <Link href="https://example.com" label="Visit external site">
|
|
164
|
+
* External Site
|
|
165
|
+
* </Link>
|
|
166
|
+
*
|
|
167
|
+
* // Button-styled link
|
|
168
|
+
* <Link
|
|
169
|
+
* href="/signup"
|
|
170
|
+
* variant={LinkVariant.BUTTON}
|
|
171
|
+
* color={LinkColor.PRIMARY}
|
|
172
|
+
* label="Sign up for account"
|
|
173
|
+
* >
|
|
174
|
+
* Get Started
|
|
175
|
+
* </Link>
|
|
176
|
+
*
|
|
177
|
+
* // Localized link
|
|
178
|
+
* <Link
|
|
179
|
+
* href="/products"
|
|
180
|
+
* locale="fr"
|
|
181
|
+
* label="Voir les produits"
|
|
182
|
+
* >
|
|
183
|
+
* Produits
|
|
184
|
+
* </Link>
|
|
185
|
+
*
|
|
186
|
+
* // Active navigation link
|
|
187
|
+
* <Link
|
|
188
|
+
* href="/dashboard"
|
|
189
|
+
* isActive={true}
|
|
190
|
+
* variant={LinkVariant.HOVERABLE}
|
|
191
|
+
* label="Current page: Dashboard"
|
|
192
|
+
* >
|
|
193
|
+
* Dashboard
|
|
194
|
+
* </Link>
|
|
195
|
+
* ```
|
|
196
|
+
*
|
|
197
|
+
* @param props - Link component props
|
|
198
|
+
* @param props.children - Content to display inside the link
|
|
199
|
+
* @param props.href - URL or path to navigate to
|
|
200
|
+
* @param props.label - Accessible label describing the link's purpose
|
|
201
|
+
* @param props.variant - Visual style variant
|
|
202
|
+
* @param props.color - Color theme for the link
|
|
203
|
+
* @param props.underlined - Underline visibility option
|
|
204
|
+
* @param props.isExternalLink - Override external link detection
|
|
205
|
+
* @param props.isActive - Whether this link represents the current page
|
|
206
|
+
* @param props.locale - Locale for URL internationalization
|
|
207
|
+
* @param props.className - Additional CSS classes
|
|
208
|
+
* @returns Accessible and internationalized link component
|
|
209
|
+
*/
|
|
41
210
|
export declare const Link: FC<LinkProps>;
|
|
42
211
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,oBAAY,WAAW;IACrB,iDAAiD;IACjD,OAAO,YAAY;IACnB,sDAAsD;IACtD,cAAc,mBAAmB;IACjC,+CAA+C;IAC/C,MAAM,WAAW;IACjB,8CAA8C;IAC9C,eAAe,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,cAAc;CACxB;AAED;;;;GAIG;AACH,oBAAY,SAAS;IACnB,0BAA0B;IAC1B,OAAO,YAAY;IACnB,4BAA4B;IAC5B,SAAS,cAAc;IACvB,oDAAoD;IACpD,WAAW,gBAAgB;IAC3B,mDAAmD;IACnD,OAAO,YAAY;IACnB,uCAAuC;IACvC,KAAK,UAAU;IACf,uCAAuC;IACvC,IAAI,SAAS;IACb,yBAAyB;IACzB,IAAI,SAAS;IACb,kDAAkD;IAClD,YAAY,iBAAiB;IAC7B,uCAAuC;IACvC,KAAK,UAAU;IACf,+CAA+C;IAC/C,OAAO,YAAY;IACnB,gDAAgD;IAChD,MAAM,WAAW;CAClB;AAED;;;;GAIG;AACH,oBAAY,cAAc;IACxB,kDAAkD;IAClD,OAAO,YAAY;IACnB,4BAA4B;IAC5B,IAAI,SAAS;IACb,2BAA2B;IAC3B,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAkD9B,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import configuration from "@intlayer/config/built";
|
|
3
2
|
import { getLocalizedUrl } from "@intlayer/core";
|
|
4
3
|
import { cva } from "class-variance-authority";
|
|
5
4
|
import { ExternalLink } from "lucide-react";
|
|
@@ -101,18 +100,15 @@ const Link = (props) => {
|
|
|
101
100
|
href: hrefProp,
|
|
102
101
|
...otherProps
|
|
103
102
|
} = props;
|
|
104
|
-
const { internationalization } = configuration;
|
|
105
103
|
const isExternalLink = checkIsExternalLink(props);
|
|
106
104
|
const isChildrenString = typeof children === "string";
|
|
107
105
|
const rel = isExternalLink ? "noopener noreferrer nofollow" : void 0;
|
|
108
106
|
const target = isExternalLink ? "_blank" : "_self";
|
|
109
|
-
const hrefLang = locale ? locale === internationalization.defaultLocale ? "x-default" : locale : void 0;
|
|
110
107
|
const href = locale && hrefProp && !isExternalLink ? getLocalizedUrl(hrefProp, locale) : hrefProp;
|
|
111
108
|
return /* @__PURE__ */ jsxs(
|
|
112
109
|
"a",
|
|
113
110
|
{
|
|
114
111
|
href,
|
|
115
|
-
hrefLang,
|
|
116
112
|
"aria-label": label,
|
|
117
113
|
rel,
|
|
118
114
|
target,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum LinkVariant {\n DEFAULT = 'default',\n INVISIBLE_LINK = 'invisible-link',\n BUTTON = 'button',\n BUTTON_OUTLINED = 'button-outlined',\n HOVERABLE = 'hoverable',\n}\n\nexport enum LinkColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n TEXT_INVERSE = 'text-inverse',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n DEFAULT = 'default',\n TRUE = 'true',\n FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n label: string;\n isExternalLink?: boolean;\n isActive?: boolean;\n locale?: LocalesValues;\n };\n\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n const { internationalization } = configuration;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const hrefLang = locale\n ? locale === internationalization.defaultLocale\n ? 'x-default'\n : locale\n : undefined;\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n hrefLang={hrefLang}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n /** Default underlined link with hover effects */\n DEFAULT = 'default',\n /** Link without visible underline or hover effects */\n INVISIBLE_LINK = 'invisible-link',\n /** Button-styled link with solid background */\n BUTTON = 'button',\n /** Button-styled link with outlined border */\n BUTTON_OUTLINED = 'button-outlined',\n /** Link with subtle hover background effect */\n HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n /** Primary brand color */\n PRIMARY = 'primary',\n /** Secondary brand color */\n SECONDARY = 'secondary',\n /** Destructive/danger color for critical actions */\n DESTRUCTIVE = 'destructive',\n /** Neutral/muted color for less prominent links */\n NEUTRAL = 'neutral',\n /** Light color for dark backgrounds */\n LIGHT = 'light',\n /** Dark color for light backgrounds */\n DARK = 'dark',\n /** Default text color */\n TEXT = 'text',\n /** Inverse text color for opposite backgrounds */\n TEXT_INVERSE = 'text-inverse',\n /** Error/red color for error states */\n ERROR = 'error',\n /** Success/green color for positive actions */\n SUCCESS = 'success',\n /** Custom color - no default styling applied */\n CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n /** Default underline behavior based on variant */\n DEFAULT = 'default',\n /** Always show underline */\n TRUE = 'true',\n /** Never show underline */\n FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n 'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n [`${LinkVariant.BUTTON}`]:\n 'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n color: LinkColor.PRIMARY,\n underlined: LinkUnderlined.DEFAULT,\n },\n }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n /**\n * Accessible label for screen readers (required)\n * Provides context about what the link does or where it leads\n * @example \"Navigate to home page\"\n */\n label: string;\n\n /**\n * Whether this link opens in a new tab/window\n * When true, adds target=\"_blank\" and security attributes\n * Auto-detected for URLs starting with http/https when undefined\n * @default undefined (auto-detect based on href)\n */\n isExternalLink?: boolean;\n\n /**\n * Whether this link represents the current page/active state\n * Adds aria-current=\"page\" for accessibility\n * @default false\n */\n isActive?: boolean;\n\n /**\n * Locale for internationalized URLs\n * When provided, URLs are automatically localized using Intlayer\n * @example 'fr', 'es', 'en'\n */\n locale?: LocalesValues;\n };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true ||\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n * About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n * External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n * href=\"/signup\"\n * variant={LinkVariant.BUTTON}\n * color={LinkColor.PRIMARY}\n * label=\"Sign up for account\"\n * >\n * Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n * href=\"/products\"\n * locale=\"fr\"\n * label=\"Voir les produits\"\n * >\n * Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n * href=\"/dashboard\"\n * isActive={true}\n * variant={LinkVariant.HOVERABLE}\n * label=\"Current page: Dashboard\"\n * >\n * Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.PRIMARY,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n isExternalLink: isExternalLinkProp,\n href: hrefProp,\n ...otherProps\n } = props;\n\n const isExternalLink = checkIsExternalLink(props);\n const isChildrenString = typeof children === 'string';\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const href =\n locale && hrefProp && !isExternalLink\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n className={cn(\n linkVariants({\n variant,\n color,\n underlined,\n className,\n })\n )}\n {...otherProps}\n >\n {variant === 'button' ? <span>{children}</span> : children}\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n </a>\n );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined"],"mappings":";;;;;AAgBO,IAAK,gCAAAA,iBAAL;AAELA,eAAA,SAAA,IAAU;AAEVA,eAAA,gBAAA,IAAiB;AAEjBA,eAAA,QAAA,IAAS;AAETA,eAAA,iBAAA,IAAkB;AAElBA,eAAA,WAAA,IAAY;AAVF,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAkBL,IAAK,8BAAAC,eAAL;AAELA,aAAA,SAAA,IAAU;AAEVA,aAAA,WAAA,IAAY;AAEZA,aAAA,aAAA,IAAc;AAEdA,aAAA,SAAA,IAAU;AAEVA,aAAA,OAAA,IAAQ;AAERA,aAAA,MAAA,IAAO;AAEPA,aAAA,MAAA,IAAO;AAEPA,aAAA,cAAA,IAAe;AAEfA,aAAA,OAAA,IAAQ;AAERA,aAAA,SAAA,IAAU;AAEVA,aAAA,QAAA,IAAS;AAtBC,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AA8BL,IAAK,mCAAAC,oBAAL;AAELA,kBAAA,SAAA,IAAU;AAEVA,kBAAA,MAAA,IAAO;AAEPA,kBAAA,OAAA,IAAQ;AANE,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAaL,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,CAAC,GAAG,SAAA,EAAqB,GACvB;AAAA,QACF,CAAC,GAAG,gBAAA,EAA4B,GAC9B;AAAA,QACF,CAAC,GAAG,QAAA,EAAoB,GACtB;AAAA,QACF,CAAC,GAAG,iBAAA,EAA6B,GAC/B;AAAA,QACF,CAAC,GAAG,WAAA,EAAuB,GACzB;AAAA,MAAA;AAAA,MAEJ,OAAO;AAAA,QACL,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,WAAA,EAAqB,GAAG;AAAA,QAC5B,CAAC,GAAG,aAAA,EAAuB,GAAG;AAAA,QAC9B,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,OAAA,EAAiB,GAAG;AAAA,QACxB,CAAC,GAAG,MAAA,EAAgB,GAAG;AAAA,QACvB,CAAC,GAAG,MAAA,EAAgB,GAAG;AAAA,QACvB,CAAC,GAAG,cAAA,EAAwB,GAAG;AAAA,QAC/B,CAAC,GAAG,OAAA,EAAiB,GAAG;AAAA,QACxB,CAAC,GAAG,SAAA,EAAmB,GAAG;AAAA,QAC1B,CAAC,GAAG,QAAA,EAAkB,GAAG;AAAA,MAAA;AAAA,MAE3B,YAAY;AAAA,QACV;AAAA,UAAC;AAAA;AAAA,WAAyB;AAAA,QAC1B;AAAA,UAAC;AAAA;AAAA,WAAsB;AAAA,QACvB;AAAA,UAAC;AAAA;AAAA,WAAuB;AAAA,MAAA;AAAA,IAC1B;AAAA,IAGF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA;AAAA,IAAA;AAAA,EACd;AAEJ;AAyDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,gBAAgB;AAClB,MAA0B;AACxB,QAAM,cAAc,OAAO,SAAS,YAAY,KAAK,WAAW;AAChE,QAAM,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,IAAI;AAE5B,SAAO;AACT;AA4FO,MAAM,OAAsB,CAAC,UAAU;AAC5C,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,iBAAiB,oBAAoB,KAAK;AAChD,QAAM,mBAAmB,OAAO,aAAa;AAE7C,QAAM,MAAM,iBAAiB,iCAAiC;AAE9D,QAAM,SAAS,iBAAiB,WAAW;AAE3C,QAAM,OACJ,UAAU,YAAY,CAAC,iBACnB,gBAAgB,UAAU,MAAM,IAChC;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,gBAAc,WAAW,SAAS;AAAA,MAClC,WAAW;AAAA,QACT,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,MAEF,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YAAY,WAAW,oBAAC,QAAA,EAAM,SAAA,CAAS,IAAU;AAAA,QACjD,kBAAkB,oBACjB,oBAAC,cAAA,EAAa,WAAU,2BAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI3D;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n isLoading?: boolean;\n};\n\n/**\n *\n *
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\n/**\n * Props for the Loader component\n */\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n /** Controls whether the loading spinner is displayed. Defaults to true when undefined */\n isLoading?: boolean;\n};\n\n/**\n * Loader Component\n *\n * A versatile loading component that can function as both a standalone loader\n * and a wrapper for content. When loading is true, displays an animated spinner.\n * When loading is false, renders the wrapped content.\n *\n * @component\n * @example\n * Standalone usage:\n * ```tsx\n * <Loader isLoading={true} />\n * ```\n *\n * @example\n * As a content wrapper:\n * ```tsx\n * <Loader isLoading={isDataLoading}>\n * <div>Your content here</div>\n * </Loader>\n * ```\n *\n * @example\n * Default behavior (loading = true):\n * ```tsx\n * <Loader />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Loader\n * isLoading={true}\n * className=\"min-h-[200px] bg-gray-50\"\n * aria-label=\"Loading user data\"\n * />\n * ```\n *\n * @example\n * Conditional content loading:\n * ```tsx\n * <Loader isLoading={!data}>\n * {data && (\n * <div>\n * <h2>{data.title}</h2>\n * <p>{data.content}</p>\n * </div>\n * )}\n * </Loader>\n * ```\n *\n * Features:\n * - Dual-mode operation: standalone spinner or content wrapper\n * - Responsive design with flexible sizing\n * - Accessible with proper ARIA attributes and role\n * - Smooth animated spinner using SVG\n * - Customizable styling through className prop\n * - Supports all standard HTML div attributes\n * - Screen constraints (max-height/width) to prevent overflow\n * - Internationalization ready with aria-label support\n *\n * Accessibility:\n * - Uses role=\"status\" for screen reader announcements\n * - Includes descriptive aria-label for the loading state\n * - Maintains focus management when transitioning between states\n * - Supports custom aria-label through props for specific contexts\n * - Compatible with keyboard navigation patterns\n *\n * Performance:\n * - Lightweight SVG spinner with CSS animations\n * - Conditional rendering prevents unnecessary DOM updates\n * - Optimized for frequent loading state changes\n * - No external dependencies beyond internal utilities\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to display when not loading\n * @param props.isLoading - Loading state control (defaults to true)\n * @param props.className - Additional CSS classes for the loader container\n * @param props.role - ARIA role (defaults to \"status\")\n * @param props.aria-label - Custom accessibility label\n * @param props.id - Unique identifier for the loader\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A loading spinner when isLoading is true, otherwise renders children\n */\nexport const Loader: FC<LoaderProps> = ({\n children,\n isLoading = true,\n className,\n ...props\n}) => (\n <>\n {isLoading ? (\n <div\n className={cn(\n 'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n className\n )}\n role=\"status\"\n aria-label=\"Animated icon, meaning that the website is processing\"\n {...props}\n >\n <Spinner className=\"size-10 max-h-full max-w-full\" />\n </div>\n ) : (\n (children ?? <></>)\n )}\n </>\n);\n"],"names":["jsx","cn","Spinner"],"mappings":";;;;;AAmGO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,4DAEK,UAAA,YACCA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAAD,2BAAAA,IAACE,0BAAAA,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,kEAAc,EAAA,CAEnB;;"}
|