gd-design-library 0.7.0 → 0.7.2
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/README.md +97 -0
- package/ai/README.md +137 -0
- package/ai/schemas/components/Row.d.ts +21 -1
- package/index.d.ts +0 -1
- package/index.js +170 -181
- package/llms.txt +309 -0
- package/package.json +19 -1
- package/CHANGELOG.md +0 -177
- package/ai/codegen.js +0 -51
- package/ai/prompts.js +0 -23
- package/ai/schemas/components/Accordion.js +0 -37
- package/ai/schemas/components/Avatar.js +0 -67
- package/ai/schemas/components/Breadcrumbs.js +0 -51
- package/ai/schemas/components/Button.js +0 -92
- package/ai/schemas/components/Card.js +0 -74
- package/ai/schemas/components/Carousel.js +0 -108
- package/ai/schemas/components/ChatBubble.js +0 -34
- package/ai/schemas/components/ChatContainer.js +0 -48
- package/ai/schemas/components/Column.js +0 -69
- package/ai/schemas/components/ContentCarousel.js +0 -72
- package/ai/schemas/components/Counter.js +0 -37
- package/ai/schemas/components/DragAndDropFiles.js +0 -50
- package/ai/schemas/components/FlexContainer.js +0 -133
- package/ai/schemas/components/Form.js +0 -36
- package/ai/schemas/components/Icon.js +0 -41
- package/ai/schemas/components/Image.js +0 -55
- package/ai/schemas/components/InlineNotification.js +0 -23
- package/ai/schemas/components/Input.js +0 -142
- package/ai/schemas/components/InputFile.js +0 -55
- package/ai/schemas/components/Label.js +0 -43
- package/ai/schemas/components/Link.js +0 -58
- package/ai/schemas/components/List.js +0 -35
- package/ai/schemas/components/Loader.js +0 -55
- package/ai/schemas/components/Modal.js +0 -51
- package/ai/schemas/components/Portal.js +0 -49
- package/ai/schemas/components/Price.js +0 -25
- package/ai/schemas/components/ProgressBar.js +0 -53
- package/ai/schemas/components/RadioGroup.js +0 -80
- package/ai/schemas/components/Rating.js +0 -64
- package/ai/schemas/components/Row.js +0 -61
- package/ai/schemas/components/Scroll.js +0 -35
- package/ai/schemas/components/Search.js +0 -72
- package/ai/schemas/components/Select.js +0 -84
- package/ai/schemas/components/Separator.js +0 -62
- package/ai/schemas/components/Skeleton.js +0 -48
- package/ai/schemas/components/Slider.js +0 -42
- package/ai/schemas/components/Snackbar.js +0 -57
- package/ai/schemas/components/SnackbarManager.js +0 -13
- package/ai/schemas/components/Stepper.js +0 -38
- package/ai/schemas/components/Switch.js +0 -64
- package/ai/schemas/components/Tabs.js +0 -37
- package/ai/schemas/components/Textarea.js +0 -88
- package/ai/schemas/components/Toggle.js +0 -41
- package/ai/schemas/components/Tooltip.js +0 -61
- package/ai/schemas/components/Typography.js +0 -56
- package/ai/schemas/components/Wrapper.js +0 -46
- package/ai/schemas/components.js +0 -56
- package/ai/schemas/hooks/useTheme.js +0 -48
- package/components/core/Breadcrumbs/Breadcrumbs.d.ts +0 -2
- package/components/core/Breadcrumbs/Breadcrumbs.js +0 -34
- package/components/core/Breadcrumbs/Breadcrumbs.types.d.ts +0 -14
- package/components/core/Breadcrumbs/BreadcrumbsStyled.d.ts +0 -6
- package/components/core/Breadcrumbs/BreadcrumbsStyled.js +0 -58
- package/components/core/Breadcrumbs/constants.d.ts +0 -1
- package/components/core/Breadcrumbs/constants.js +0 -4
- package/components/core/Breadcrumbs/index.d.ts +0 -2
- package/components/core/Button/Button.d.ts +0 -2
- package/components/core/Button/Button.js +0 -43
- package/components/core/Button/Button.types.d.ts +0 -26
- package/components/core/Button/ButtonStyled.d.ts +0 -5
- package/components/core/Button/ButtonStyled.js +0 -53
- package/components/core/Button/constants.d.ts +0 -1
- package/components/core/Button/constants.js +0 -4
- package/components/core/Button/index.d.ts +0 -2
- package/components/core/Dropdown/Dropdown.d.ts +0 -3
- package/components/core/Dropdown/Dropdown.js +0 -38
- package/components/core/Dropdown/Dropdown.types.d.ts +0 -8
- package/components/core/Dropdown/DropdownStyled.d.ts +0 -2
- package/components/core/Dropdown/DropdownStyled.js +0 -17
- package/components/core/Dropdown/constants.d.ts +0 -1
- package/components/core/Dropdown/constants.js +0 -4
- package/components/core/Dropdown/hooks/index.d.ts +0 -1
- package/components/core/Dropdown/hooks/useDropdown.d.ts +0 -3
- package/components/core/Dropdown/hooks/useDropdown.js +0 -12
- package/components/core/Dropdown/index.d.ts +0 -3
- package/components/core/DropdownItem/DropdownItem.d.ts +0 -2
- package/components/core/DropdownItem/DropdownItem.js +0 -45
- package/components/core/DropdownItem/DropdownItem.types.d.ts +0 -9
- package/components/core/DropdownItem/DropdownItemStyled.d.ts +0 -2
- package/components/core/DropdownItem/DropdownItemStyled.js +0 -17
- package/components/core/DropdownItem/constants.d.ts +0 -1
- package/components/core/DropdownItem/constants.js +0 -4
- package/components/core/DropdownItem/index.d.ts +0 -2
- package/components/core/Form/Form.d.ts +0 -2
- package/components/core/Form/Form.js +0 -48
- package/components/core/Form/Form.types.d.ts +0 -29
- package/components/core/Form/FormStyled.d.ts +0 -2
- package/components/core/Form/FormStyled.js +0 -16
- package/components/core/Form/constants.d.ts +0 -1
- package/components/core/Form/constants.js +0 -4
- package/components/core/Form/index.d.ts +0 -2
- package/components/core/Form/utils.d.ts +0 -3
- package/components/core/Form/utils.js +0 -34
- package/components/core/Icon/Icon.d.ts +0 -4
- package/components/core/Icon/Icon.js +0 -40
- package/components/core/Icon/Icon.types.d.ts +0 -11
- package/components/core/Icon/constants.d.ts +0 -317
- package/components/core/Icon/constants.js +0 -102
- package/components/core/Icon/index.d.ts +0 -2
- package/components/core/Icon/utils.d.ts +0 -3
- package/components/core/Image/Image.d.ts +0 -2
- package/components/core/Image/Image.js +0 -40
- package/components/core/Image/Image.types.d.ts +0 -27
- package/components/core/Image/ImageStyled.d.ts +0 -5
- package/components/core/Image/ImageStyled.js +0 -54
- package/components/core/Image/constants.d.ts +0 -1
- package/components/core/Image/constants.js +0 -4
- package/components/core/Image/index.d.ts +0 -2
- package/components/core/InlineNotification/InlineNotification.d.ts +0 -2
- package/components/core/InlineNotification/InlineNotification.js +0 -38
- package/components/core/InlineNotification/InlineNotification.types.d.ts +0 -9
- package/components/core/InlineNotification/InlineNotificationStyled.d.ts +0 -3
- package/components/core/InlineNotification/InlineNotificationStyled.js +0 -29
- package/components/core/InlineNotification/constants.d.ts +0 -16
- package/components/core/InlineNotification/constants.js +0 -21
- package/components/core/InlineNotification/index.d.ts +0 -2
- package/components/core/Input/Input.d.ts +0 -2
- package/components/core/Input/Input.js +0 -73
- package/components/core/Input/Input.types.d.ts +0 -74
- package/components/core/Input/InputAdornment/InputAdornment.d.ts +0 -2
- package/components/core/Input/InputAdornment/InputAdornment.js +0 -18
- package/components/core/Input/InputAdornment/InputAdornmentStyled.d.ts +0 -2
- package/components/core/Input/InputAdornment/InputAdornmentStyled.js +0 -15
- package/components/core/Input/InputAdornment/constants.d.ts +0 -1
- package/components/core/Input/InputAdornment/constants.js +0 -4
- package/components/core/Input/InputAdornment/index.d.ts +0 -1
- package/components/core/Input/InputHelper/InputHelper.d.ts +0 -2
- package/components/core/Input/InputHelper/InputHelper.js +0 -22
- package/components/core/Input/InputHelper/InputHelperStyled.d.ts +0 -2
- package/components/core/Input/InputHelper/InputHelperStyled.js +0 -17
- package/components/core/Input/InputHelper/constants.d.ts +0 -1
- package/components/core/Input/InputHelper/constants.js +0 -4
- package/components/core/Input/InputHelper/index.d.ts +0 -1
- package/components/core/Input/InputStyled.d.ts +0 -2
- package/components/core/Input/InputStyled.js +0 -18
- package/components/core/Input/InputWrapper/InputWrapper.d.ts +0 -2
- package/components/core/Input/InputWrapper/InputWrapper.js +0 -22
- package/components/core/Input/InputWrapper/InputWrapperStyled.d.ts +0 -2
- package/components/core/Input/InputWrapper/InputWrapperStyled.js +0 -21
- package/components/core/Input/InputWrapper/constants.d.ts +0 -1
- package/components/core/Input/InputWrapper/constants.js +0 -4
- package/components/core/Input/InputWrapper/index.d.ts +0 -1
- package/components/core/Input/constants.d.ts +0 -14
- package/components/core/Input/constants.js +0 -18
- package/components/core/Input/index.d.ts +0 -2
- package/components/core/Input/useInputHandlers.d.ts +0 -17
- package/components/core/Input/useInputHandlers.js +0 -31
- package/components/core/InputFile/InputFile.d.ts +0 -34
- package/components/core/InputFile/InputFile.js +0 -40
- package/components/core/InputFile/InputFile.types.d.ts +0 -18
- package/components/core/InputFile/InputFileStyled.d.ts +0 -3
- package/components/core/InputFile/InputFileStyled.js +0 -27
- package/components/core/InputFile/constants.d.ts +0 -3
- package/components/core/InputFile/constants.js +0 -6
- package/components/core/InputFile/index.d.ts +0 -2
- package/components/core/Label/Label.d.ts +0 -2
- package/components/core/Label/Label.js +0 -28
- package/components/core/Label/Label.types.d.ts +0 -10
- package/components/core/Label/LabelStyled.d.ts +0 -2
- package/components/core/Label/LabelStyled.js +0 -21
- package/components/core/Label/constants.d.ts +0 -1
- package/components/core/Label/constants.js +0 -4
- package/components/core/Label/index.d.ts +0 -2
- package/components/core/Link/Link.d.ts +0 -2
- package/components/core/Link/Link.js +0 -43
- package/components/core/Link/Link.types.d.ts +0 -21
- package/components/core/Link/LinkStyled.d.ts +0 -2
- package/components/core/Link/LinkStyled.js +0 -22
- package/components/core/Link/constants.d.ts +0 -1
- package/components/core/Link/constants.js +0 -4
- package/components/core/Link/index.d.ts +0 -2
- package/components/core/List/List.d.ts +0 -3
- package/components/core/List/List.js +0 -45
- package/components/core/List/List.types.d.ts +0 -10
- package/components/core/List/ListStyled.d.ts +0 -3
- package/components/core/List/ListStyled.js +0 -31
- package/components/core/List/constants.d.ts +0 -1
- package/components/core/List/constants.js +0 -4
- package/components/core/List/index.d.ts +0 -2
- package/components/core/Loader/Loader.d.ts +0 -2
- package/components/core/Loader/Loader.js +0 -29
- package/components/core/Loader/Loader.types.d.ts +0 -18
- package/components/core/Loader/LoaderStyled.d.ts +0 -2
- package/components/core/Loader/LoaderStyled.js +0 -41
- package/components/core/Loader/constants.d.ts +0 -2
- package/components/core/Loader/constants.js +0 -6
- package/components/core/Loader/index.d.ts +0 -2
- package/components/core/Loader/utils.d.ts +0 -11
- package/components/core/Loader/utils.js +0 -37
- package/components/core/Menu/Menu.d.ts +0 -2
- package/components/core/Menu/Menu.js +0 -106
- package/components/core/Menu/Menu.types.d.ts +0 -15
- package/components/core/Menu/MenuStyled.d.ts +0 -3
- package/components/core/Menu/MenuStyled.js +0 -31
- package/components/core/Menu/constants.d.ts +0 -10
- package/components/core/Menu/constants.js +0 -24
- package/components/core/Menu/index.d.ts +0 -2
- package/components/core/Modal/Modal.d.ts +0 -2
- package/components/core/Modal/Modal.js +0 -47
- package/components/core/Modal/Modal.types.d.ts +0 -18
- package/components/core/Modal/ModalStyled.d.ts +0 -8
- package/components/core/Modal/ModalStyled.js +0 -76
- package/components/core/Modal/constants.d.ts +0 -1
- package/components/core/Modal/constants.js +0 -4
- package/components/core/Modal/index.d.ts +0 -2
- package/components/core/Portal/Portal.d.ts +0 -2
- package/components/core/Portal/Portal.js +0 -26
- package/components/core/Portal/Portal.types.d.ts +0 -10
- package/components/core/Portal/constants.d.ts +0 -1
- package/components/core/Portal/index.d.ts +0 -2
- package/components/core/Scroll/Scroll.d.ts +0 -19
- package/components/core/Scroll/Scroll.js +0 -40
- package/components/core/Scroll/Scroll.types.d.ts +0 -19
- package/components/core/Scroll/ScrollBar.d.ts +0 -2
- package/components/core/Scroll/ScrollBar.js +0 -68
- package/components/core/Scroll/ScrollStyled.d.ts +0 -6
- package/components/core/Scroll/ScrollStyled.js +0 -56
- package/components/core/Scroll/constants.d.ts +0 -3
- package/components/core/Scroll/constants.js +0 -6
- package/components/core/Scroll/index.d.ts +0 -2
- package/components/core/Scroll/utils.d.ts +0 -5
- package/components/core/Scroll/utils.js +0 -41
- package/components/core/Select/Select.d.ts +0 -2
- package/components/core/Select/Select.js +0 -192
- package/components/core/Select/Select.types.d.ts +0 -69
- package/components/core/Select/SelectStyled.d.ts +0 -8
- package/components/core/Select/SelectStyled.js +0 -67
- package/components/core/Select/constants.d.ts +0 -2
- package/components/core/Select/constants.js +0 -5
- package/components/core/Select/hooks/index.d.ts +0 -1
- package/components/core/Select/hooks/useSelectContext.d.ts +0 -3
- package/components/core/Select/hooks/useSelectContext.js +0 -12
- package/components/core/Select/index.d.ts +0 -3
- package/components/core/Separator/Separator.d.ts +0 -2
- package/components/core/Separator/Separator.js +0 -36
- package/components/core/Separator/Separator.types.d.ts +0 -31
- package/components/core/Separator/SeparatorStyled.d.ts +0 -4
- package/components/core/Separator/SeparatorStyled.js +0 -61
- package/components/core/Separator/constants.d.ts +0 -1
- package/components/core/Separator/constants.js +0 -4
- package/components/core/Separator/index.d.ts +0 -2
- package/components/core/Skeleton/Skeleton.d.ts +0 -2
- package/components/core/Skeleton/Skeleton.js +0 -24
- package/components/core/Skeleton/Skeleton.types.d.ts +0 -17
- package/components/core/Skeleton/SkeletonStyled.d.ts +0 -2
- package/components/core/Skeleton/SkeletonStyled.js +0 -28
- package/components/core/Skeleton/constants.d.ts +0 -2
- package/components/core/Skeleton/constants.js +0 -6
- package/components/core/Skeleton/index.d.ts +0 -2
- package/components/core/Slider/Slider.d.ts +0 -20
- package/components/core/Slider/Slider.js +0 -35
- package/components/core/Slider/Slider.types.d.ts +0 -17
- package/components/core/Slider/SliderStyled.d.ts +0 -2
- package/components/core/Slider/SliderStyled.js +0 -20
- package/components/core/Slider/constants.d.ts +0 -3
- package/components/core/Slider/constants.js +0 -6
- package/components/core/Slider/index.d.ts +0 -3
- package/components/core/Snackbar/Snackbar.d.ts +0 -2
- package/components/core/Snackbar/Snackbar.js +0 -48
- package/components/core/Snackbar/Snackbar.types.d.ts +0 -36
- package/components/core/Snackbar/SnackbarManager.d.ts +0 -3
- package/components/core/Snackbar/SnackbarManager.js +0 -48
- package/components/core/Snackbar/SnackbarStyled.d.ts +0 -12
- package/components/core/Snackbar/SnackbarStyled.js +0 -107
- package/components/core/Snackbar/constants.d.ts +0 -8
- package/components/core/Snackbar/constants.js +0 -10
- package/components/core/Snackbar/index.d.ts +0 -4
- package/components/core/Switch/Switch.d.ts +0 -2
- package/components/core/Switch/Switch.js +0 -46
- package/components/core/Switch/Switch.types.d.ts +0 -21
- package/components/core/Switch/SwitchStyled.d.ts +0 -6
- package/components/core/Switch/SwitchStyled.js +0 -56
- package/components/core/Switch/constants.d.ts +0 -1
- package/components/core/Switch/constants.js +0 -4
- package/components/core/Switch/index.d.ts +0 -2
- package/components/core/Textarea/Textarea.d.ts +0 -2
- package/components/core/Textarea/Textarea.js +0 -35
- package/components/core/Textarea/Textarea.types.d.ts +0 -42
- package/components/core/Textarea/Textarea.types.js +0 -6
- package/components/core/Textarea/TextareaStyled.d.ts +0 -2
- package/components/core/Textarea/TextareaStyled.js +0 -27
- package/components/core/Textarea/constants.d.ts +0 -1
- package/components/core/Textarea/constants.js +0 -4
- package/components/core/Textarea/hooks/index.d.ts +0 -2
- package/components/core/Textarea/hooks/useDynamicHeightAdjustment.d.ts +0 -2
- package/components/core/Textarea/hooks/useDynamicHeightAdjustment.js +0 -8
- package/components/core/Textarea/hooks/useResizeObserver.d.ts +0 -2
- package/components/core/Textarea/hooks/useResizeObserver.js +0 -24
- package/components/core/Textarea/index.d.ts +0 -2
- package/components/core/Toggle/Toggle.d.ts +0 -2
- package/components/core/Toggle/Toggle.js +0 -37
- package/components/core/Toggle/Toggle.types.d.ts +0 -17
- package/components/core/Toggle/ToggleStyled.d.ts +0 -2
- package/components/core/Toggle/ToggleStyled.js +0 -18
- package/components/core/Toggle/constants.d.ts +0 -1
- package/components/core/Toggle/constants.js +0 -4
- package/components/core/Toggle/index.d.ts +0 -2
- package/components/core/Tooltip/Tooltip.d.ts +0 -3
- package/components/core/Tooltip/Tooltip.js +0 -52
- package/components/core/Tooltip/Tooltip.types.d.ts +0 -22
- package/components/core/Tooltip/Tooltip.types.js +0 -4
- package/components/core/Tooltip/TooltipStyled.d.ts +0 -3
- package/components/core/Tooltip/TooltipStyled.js +0 -24
- package/components/core/Tooltip/constants.d.ts +0 -3
- package/components/core/Tooltip/constants.js +0 -6
- package/components/core/Tooltip/index.d.ts +0 -2
- package/components/core/Tooltip/utils.d.ts +0 -22
- package/components/core/Tooltip/utils.js +0 -78
- package/components/core/Typography/Typography.d.ts +0 -2
- package/components/core/Typography/Typography.js +0 -26
- package/components/core/Typography/Typography.types.d.ts +0 -20
- package/components/core/Typography/TypographyStyled.d.ts +0 -2
- package/components/core/Typography/TypographyStyled.js +0 -32
- package/components/core/Typography/constants.d.ts +0 -1
- package/components/core/Typography/constants.js +0 -4
- package/components/core/Typography/index.d.ts +0 -2
- package/components/core/Wrapper/Wrapper.d.ts +0 -3
- package/components/core/Wrapper/Wrapper.js +0 -21
- package/components/core/Wrapper/Wrapper.types.d.ts +0 -11
- package/components/core/Wrapper/WrapperStyled.d.ts +0 -2
- package/components/core/Wrapper/WrapperStyled.js +0 -24
- package/components/core/Wrapper/constants.d.ts +0 -1
- package/components/core/Wrapper/constants.js +0 -4
- package/components/core/Wrapper/index.d.ts +0 -2
- package/components/core/index.d.ts +0 -30
- package/components/core/types/events.types.d.ts +0 -7
- package/components/core/types/index.types.d.ts +0 -2
- package/components/core/types/roles.types.d.ts +0 -4
- package/components/core/types/roles.types.js +0 -4
- package/components/domainSpecific/Accordion/Accordion.d.ts +0 -2
- package/components/domainSpecific/Accordion/Accordion.js +0 -35
- package/components/domainSpecific/Accordion/Accordion.types.d.ts +0 -24
- package/components/domainSpecific/Accordion/AccordionContent/AccordionContent.d.ts +0 -2
- package/components/domainSpecific/Accordion/AccordionContent/AccordionContent.js +0 -21
- package/components/domainSpecific/Accordion/AccordionContent/index.d.ts +0 -1
- package/components/domainSpecific/Accordion/AccordionHeader/AccordionHeader.d.ts +0 -2
- package/components/domainSpecific/Accordion/AccordionHeader/AccordionHeader.js +0 -29
- package/components/domainSpecific/Accordion/AccordionHeader/index.d.ts +0 -1
- package/components/domainSpecific/Accordion/AccordionItem/AccordionItem.d.ts +0 -2
- package/components/domainSpecific/Accordion/AccordionItem/AccordionItem.js +0 -26
- package/components/domainSpecific/Accordion/AccordionItem/index.d.ts +0 -1
- package/components/domainSpecific/Accordion/AccordionStyled.d.ts +0 -5
- package/components/domainSpecific/Accordion/AccordionStyled.js +0 -39
- package/components/domainSpecific/Accordion/constants.d.ts +0 -5
- package/components/domainSpecific/Accordion/constants.js +0 -7
- package/components/domainSpecific/Accordion/hooks/index.d.ts +0 -1
- package/components/domainSpecific/Accordion/hooks/useAccordion.d.ts +0 -3
- package/components/domainSpecific/Accordion/hooks/useAccordion.js +0 -12
- package/components/domainSpecific/Accordion/index.d.ts +0 -4
- package/components/domainSpecific/Avatar/Avatar.d.ts +0 -4
- package/components/domainSpecific/Avatar/Avatar.js +0 -44
- package/components/domainSpecific/Avatar/Avatar.types.d.ts +0 -27
- package/components/domainSpecific/Avatar/AvatarStyled.d.ts +0 -6
- package/components/domainSpecific/Avatar/AvatarStyled.js +0 -63
- package/components/domainSpecific/Avatar/constants.d.ts +0 -3
- package/components/domainSpecific/Avatar/constants.js +0 -6
- package/components/domainSpecific/Avatar/index.d.ts +0 -2
- package/components/domainSpecific/Card/Card.d.ts +0 -20
- package/components/domainSpecific/Card/Card.js +0 -47
- package/components/domainSpecific/Card/Card.types.d.ts +0 -51
- package/components/domainSpecific/Card/CardButton/CardButton.d.ts +0 -4
- package/components/domainSpecific/Card/CardButton/CardButton.js +0 -25
- package/components/domainSpecific/Card/CardButton/CardButtonStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardButton/CardButtonStyled.js +0 -18
- package/components/domainSpecific/Card/CardButton/constants.d.ts +0 -1
- package/components/domainSpecific/Card/CardButton/constants.js +0 -4
- package/components/domainSpecific/Card/CardButton/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardCounter/CardCounter.d.ts +0 -4
- package/components/domainSpecific/Card/CardCounter/CardCounter.js +0 -26
- package/components/domainSpecific/Card/CardCounter/CardCounterStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardCounter/CardCounterStyled.js +0 -17
- package/components/domainSpecific/Card/CardCounter/constants.d.ts +0 -1
- package/components/domainSpecific/Card/CardCounter/constants.js +0 -4
- package/components/domainSpecific/Card/CardCounter/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardDescription/CardDescription.d.ts +0 -2
- package/components/domainSpecific/Card/CardDescription/CardDescription.js +0 -24
- package/components/domainSpecific/Card/CardDescription/CardDescriptionStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardDescription/CardDescriptionStyled.js +0 -24
- package/components/domainSpecific/Card/CardDescription/constants.d.ts +0 -6
- package/components/domainSpecific/Card/CardDescription/constants.js +0 -10
- package/components/domainSpecific/Card/CardDescription/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardImage/CardImage.d.ts +0 -2
- package/components/domainSpecific/Card/CardImage/CardImage.js +0 -26
- package/components/domainSpecific/Card/CardImage/CardImageStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardImage/CardImageStyled.js +0 -18
- package/components/domainSpecific/Card/CardImage/constants.d.ts +0 -1
- package/components/domainSpecific/Card/CardImage/constants.js +0 -4
- package/components/domainSpecific/Card/CardImage/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardPrice/CardPrice.d.ts +0 -2
- package/components/domainSpecific/Card/CardPrice/CardPrice.js +0 -22
- package/components/domainSpecific/Card/CardPrice/CardPriceStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardPrice/CardPriceStyled.js +0 -18
- package/components/domainSpecific/Card/CardPrice/constants.d.ts +0 -1
- package/components/domainSpecific/Card/CardPrice/constants.js +0 -4
- package/components/domainSpecific/Card/CardPrice/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardRating/CardRating.d.ts +0 -2
- package/components/domainSpecific/Card/CardRating/CardRating.js +0 -30
- package/components/domainSpecific/Card/CardRating/CardRatingStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardRating/CardRatingStyled.js +0 -18
- package/components/domainSpecific/Card/CardRating/constants.d.ts +0 -3
- package/components/domainSpecific/Card/CardRating/constants.js +0 -6
- package/components/domainSpecific/Card/CardRating/index.d.ts +0 -1
- package/components/domainSpecific/Card/CardTitle/CardTitle.d.ts +0 -4
- package/components/domainSpecific/Card/CardTitle/CardTitle.js +0 -25
- package/components/domainSpecific/Card/CardTitle/CardTitleStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CardTitle/CardTitleStyled.js +0 -24
- package/components/domainSpecific/Card/CardTitle/constants.d.ts +0 -6
- package/components/domainSpecific/Card/CardTitle/constants.js +0 -10
- package/components/domainSpecific/Card/CardTitle/index.d.ts +0 -1
- package/components/domainSpecific/Card/CartStyled.d.ts +0 -2
- package/components/domainSpecific/Card/CartStyled.js +0 -26
- package/components/domainSpecific/Card/constants.d.ts +0 -1
- package/components/domainSpecific/Card/constants.js +0 -4
- package/components/domainSpecific/Card/index.d.ts +0 -2
- package/components/domainSpecific/Carousel/Carousel.d.ts +0 -12
- package/components/domainSpecific/Carousel/Carousel.js +0 -137
- package/components/domainSpecific/Carousel/Carousel.types.d.ts +0 -35
- package/components/domainSpecific/Carousel/CarouselStyled.d.ts +0 -15
- package/components/domainSpecific/Carousel/CarouselStyled.js +0 -143
- package/components/domainSpecific/Carousel/constants.d.ts +0 -1
- package/components/domainSpecific/Carousel/constants.js +0 -4
- package/components/domainSpecific/Carousel/index.d.ts +0 -2
- package/components/domainSpecific/ChatBubble/ChatBubble.d.ts +0 -2
- package/components/domainSpecific/ChatBubble/ChatBubble.js +0 -26
- package/components/domainSpecific/ChatBubble/ChatBubble.types.d.ts +0 -16
- package/components/domainSpecific/ChatBubble/ChatBubbleStyled.d.ts +0 -4
- package/components/domainSpecific/ChatBubble/ChatBubbleStyled.js +0 -43
- package/components/domainSpecific/ChatBubble/constants.d.ts +0 -1
- package/components/domainSpecific/ChatBubble/constants.js +0 -4
- package/components/domainSpecific/ChatBubble/index.d.ts +0 -2
- package/components/domainSpecific/ContentCarousel/ContentCarousel.d.ts +0 -2
- package/components/domainSpecific/ContentCarousel/ContentCarousel.js +0 -68
- package/components/domainSpecific/ContentCarousel/ContentCarousel.types.d.ts +0 -16
- package/components/domainSpecific/ContentCarousel/ContentCarouselStyled.d.ts +0 -5
- package/components/domainSpecific/ContentCarousel/ContentCarouselStyled.js +0 -32
- package/components/domainSpecific/ContentCarousel/constants.d.ts +0 -1
- package/components/domainSpecific/ContentCarousel/constants.js +0 -4
- package/components/domainSpecific/ContentCarousel/index.d.ts +0 -2
- package/components/domainSpecific/Counter/Counter.d.ts +0 -2
- package/components/domainSpecific/Counter/Counter.js +0 -55
- package/components/domainSpecific/Counter/Counter.types.d.ts +0 -15
- package/components/domainSpecific/Counter/CounterStyled.d.ts +0 -3
- package/components/domainSpecific/Counter/CounterStyled.js +0 -26
- package/components/domainSpecific/Counter/constants.d.ts +0 -5
- package/components/domainSpecific/Counter/constants.js +0 -8
- package/components/domainSpecific/Counter/index.d.ts +0 -2
- package/components/domainSpecific/DragAndDropFiles/DragAndDropFiles.d.ts +0 -4
- package/components/domainSpecific/DragAndDropFiles/DragAndDropFiles.js +0 -48
- package/components/domainSpecific/DragAndDropFiles/DragAndDropFiles.types.d.ts +0 -21
- package/components/domainSpecific/DragAndDropFiles/DragAndDropFilesStyled.d.ts +0 -2
- package/components/domainSpecific/DragAndDropFiles/DragAndDropFilesStyled.js +0 -16
- package/components/domainSpecific/DragAndDropFiles/constants.d.ts +0 -1
- package/components/domainSpecific/DragAndDropFiles/constants.js +0 -4
- package/components/domainSpecific/DragAndDropFiles/hooks/useDragAndDrop/index.d.ts +0 -1
- package/components/domainSpecific/DragAndDropFiles/hooks/useDragAndDrop/useDragAndDrop.d.ts +0 -19
- package/components/domainSpecific/DragAndDropFiles/hooks/useDragAndDrop/useDragAndDrop.js +0 -49
- package/components/domainSpecific/DragAndDropFiles/index.d.ts +0 -2
- package/components/domainSpecific/Header/Header.d.ts +0 -2
- package/components/domainSpecific/Header/Header.js +0 -88
- package/components/domainSpecific/Header/Header.types.d.ts +0 -31
- package/components/domainSpecific/Header/HeaderStyled.d.ts +0 -14
- package/components/domainSpecific/Header/HeaderStyled.js +0 -136
- package/components/domainSpecific/Header/constants.d.ts +0 -1
- package/components/domainSpecific/Header/constants.js +0 -4
- package/components/domainSpecific/Header/index.d.ts +0 -1
- package/components/domainSpecific/Price/Price.d.ts +0 -4
- package/components/domainSpecific/Price/Price.js +0 -23
- package/components/domainSpecific/Price/Price.types.d.ts +0 -10
- package/components/domainSpecific/Price/PriceStyled.d.ts +0 -4
- package/components/domainSpecific/Price/PriceStyled.js +0 -42
- package/components/domainSpecific/Price/constants.d.ts +0 -1
- package/components/domainSpecific/Price/constants.js +0 -4
- package/components/domainSpecific/Price/index.d.ts +0 -2
- package/components/domainSpecific/ProgressBar/ProgressBar.d.ts +0 -4
- package/components/domainSpecific/ProgressBar/ProgressBar.js +0 -29
- package/components/domainSpecific/ProgressBar/ProgressBar.types.d.ts +0 -36
- package/components/domainSpecific/ProgressBar/ProgressBarStyled.d.ts +0 -6
- package/components/domainSpecific/ProgressBar/ProgressBarStyled.js +0 -70
- package/components/domainSpecific/ProgressBar/constants.d.ts +0 -4
- package/components/domainSpecific/ProgressBar/constants.js +0 -7
- package/components/domainSpecific/ProgressBar/index.d.ts +0 -2
- package/components/domainSpecific/RadioGroup/RadioGroup.d.ts +0 -4
- package/components/domainSpecific/RadioGroup/RadioGroup.js +0 -54
- package/components/domainSpecific/RadioGroup/RadioGroup.types.d.ts +0 -74
- package/components/domainSpecific/RadioGroup/RadioGroup.types.js +0 -4
- package/components/domainSpecific/RadioGroup/RadioGroupItem/RadioGroupItem.d.ts +0 -5
- package/components/domainSpecific/RadioGroup/RadioGroupItem/RadioGroupItem.js +0 -37
- package/components/domainSpecific/RadioGroup/RadioGroupItem/index.d.ts +0 -1
- package/components/domainSpecific/RadioGroup/RadioGroupStyled.d.ts +0 -6
- package/components/domainSpecific/RadioGroup/RadioGroupStyled.js +0 -130
- package/components/domainSpecific/RadioGroup/constants.d.ts +0 -2
- package/components/domainSpecific/RadioGroup/constants.js +0 -5
- package/components/domainSpecific/RadioGroup/index.d.ts +0 -2
- package/components/domainSpecific/Rating/Rating.d.ts +0 -2
- package/components/domainSpecific/Rating/Rating.js +0 -63
- package/components/domainSpecific/Rating/Rating.types.d.ts +0 -20
- package/components/domainSpecific/Rating/RatingStyled.d.ts +0 -5
- package/components/domainSpecific/Rating/RatingStyled.js +0 -61
- package/components/domainSpecific/Rating/constants.d.ts +0 -6
- package/components/domainSpecific/Rating/constants.js +0 -9
- package/components/domainSpecific/Rating/index.d.ts +0 -2
- package/components/domainSpecific/Search/Search.d.ts +0 -3
- package/components/domainSpecific/Search/Search.js +0 -39
- package/components/domainSpecific/Search/Search.types.d.ts +0 -30
- package/components/domainSpecific/Search/SearchStyled.d.ts +0 -5
- package/components/domainSpecific/Search/SearchStyled.js +0 -16
- package/components/domainSpecific/Search/constants.d.ts +0 -4
- package/components/domainSpecific/Search/constants.js +0 -7
- package/components/domainSpecific/Search/index.d.ts +0 -2
- package/components/domainSpecific/SearchModal/SearchInput/SearchInput.d.ts +0 -5
- package/components/domainSpecific/SearchModal/SearchInput/SearchInput.js +0 -26
- package/components/domainSpecific/SearchModal/SearchInput/SearchInputStyled.d.ts +0 -4
- package/components/domainSpecific/SearchModal/SearchInput/SearchInputStyled.js +0 -25
- package/components/domainSpecific/SearchModal/SearchInput/constants.d.ts +0 -3
- package/components/domainSpecific/SearchModal/SearchInput/constants.js +0 -6
- package/components/domainSpecific/SearchModal/SearchInput/index.d.ts +0 -1
- package/components/domainSpecific/SearchModal/SearchItems/SearchItems.d.ts +0 -5
- package/components/domainSpecific/SearchModal/SearchItems/SearchItems.js +0 -48
- package/components/domainSpecific/SearchModal/SearchItems/SearchItemsStyled.d.ts +0 -10
- package/components/domainSpecific/SearchModal/SearchItems/SearchItemsStyled.js +0 -82
- package/components/domainSpecific/SearchModal/SearchItems/constants.d.ts +0 -7
- package/components/domainSpecific/SearchModal/SearchItems/constants.js +0 -10
- package/components/domainSpecific/SearchModal/SearchItems/index.d.ts +0 -1
- package/components/domainSpecific/SearchModal/SearchItems/utils.d.ts +0 -2
- package/components/domainSpecific/SearchModal/SearchItems/utils.js +0 -7
- package/components/domainSpecific/SearchModal/SearchLoader/SearchLoader.d.ts +0 -5
- package/components/domainSpecific/SearchModal/SearchLoader/SearchLoader.js +0 -20
- package/components/domainSpecific/SearchModal/SearchLoader/SearchLoaderStyled.d.ts +0 -3
- package/components/domainSpecific/SearchModal/SearchLoader/SearchLoaderStyled.js +0 -14
- package/components/domainSpecific/SearchModal/SearchLoader/constants.d.ts +0 -1
- package/components/domainSpecific/SearchModal/SearchLoader/constants.js +0 -4
- package/components/domainSpecific/SearchModal/SearchLoader/index.d.ts +0 -1
- package/components/domainSpecific/SearchModal/SearchModal.d.ts +0 -4
- package/components/domainSpecific/SearchModal/SearchModal.js +0 -39
- package/components/domainSpecific/SearchModal/SearchModal.types.d.ts +0 -48
- package/components/domainSpecific/SearchModal/SearchModalStyled.d.ts +0 -3
- package/components/domainSpecific/SearchModal/SearchModalStyled.js +0 -29
- package/components/domainSpecific/SearchModal/constants.d.ts +0 -5
- package/components/domainSpecific/SearchModal/constants.js +0 -8
- package/components/domainSpecific/SearchModal/index.d.ts +0 -2
- package/components/domainSpecific/Stepper/Stepper.d.ts +0 -2
- package/components/domainSpecific/Stepper/Stepper.js +0 -42
- package/components/domainSpecific/Stepper/Stepper.types.d.ts +0 -31
- package/components/domainSpecific/Stepper/StepperStyled.d.ts +0 -6
- package/components/domainSpecific/Stepper/StepperStyled.js +0 -58
- package/components/domainSpecific/Stepper/constants.d.ts +0 -1
- package/components/domainSpecific/Stepper/constants.js +0 -4
- package/components/domainSpecific/Stepper/index.d.ts +0 -2
- package/components/domainSpecific/Stepper/utils.d.ts +0 -2
- package/components/domainSpecific/Stepper/utils.js +0 -37
- package/components/domainSpecific/Tabs/Tabs.d.ts +0 -2
- package/components/domainSpecific/Tabs/Tabs.js +0 -40
- package/components/domainSpecific/Tabs/Tabs.types.d.ts +0 -26
- package/components/domainSpecific/Tabs/TabsStyled.d.ts +0 -8
- package/components/domainSpecific/Tabs/TabsStyled.js +0 -79
- package/components/domainSpecific/Tabs/constants.d.ts +0 -6
- package/components/domainSpecific/Tabs/constants.js +0 -6
- package/components/domainSpecific/Tabs/index.d.ts +0 -2
- package/components/domainSpecific/index.d.ts +0 -17
- package/components/index.d.ts +0 -6
- package/components/index.types.d.ts +0 -115
- package/components/index.types.js +0 -4
- package/components/layout/ChatContainer/ChatContainer.d.ts +0 -2
- package/components/layout/ChatContainer/ChatContainer.js +0 -57
- package/components/layout/ChatContainer/ChatContainer.types.d.ts +0 -25
- package/components/layout/ChatContainer/ChatContainerStyled.d.ts +0 -9
- package/components/layout/ChatContainer/ChatContainerStyled.js +0 -74
- package/components/layout/ChatContainer/constants.d.ts +0 -1
- package/components/layout/ChatContainer/constants.js +0 -4
- package/components/layout/ChatContainer/index.d.ts +0 -2
- package/components/layout/Column/Column.d.ts +0 -2
- package/components/layout/Column/Column.js +0 -26
- package/components/layout/Column/Column.types.d.ts +0 -6
- package/components/layout/Column/ColumnStyled.d.ts +0 -2
- package/components/layout/Column/ColumnStyled.js +0 -36
- package/components/layout/Column/constants.d.ts +0 -1
- package/components/layout/Column/constants.js +0 -4
- package/components/layout/Column/index.d.ts +0 -2
- package/components/layout/FlexContainer/FlexContainer.d.ts +0 -2
- package/components/layout/FlexContainer/FlexContainer.js +0 -22
- package/components/layout/FlexContainer/FlexContainer.types.d.ts +0 -6
- package/components/layout/FlexContainer/FlexContainerStyled.d.ts +0 -2
- package/components/layout/FlexContainer/FlexContainerStyled.js +0 -21
- package/components/layout/FlexContainer/constants.d.ts +0 -1
- package/components/layout/FlexContainer/constants.js +0 -4
- package/components/layout/FlexContainer/index.d.ts +0 -2
- package/components/layout/FlexContainer/utils.d.ts +0 -2
- package/components/layout/Row/Row.d.ts +0 -3
- package/components/layout/Row/Row.js +0 -26
- package/components/layout/Row/Row.types.d.ts +0 -6
- package/components/layout/Row/RowStyled.d.ts +0 -2
- package/components/layout/Row/RowStyled.js +0 -36
- package/components/layout/Row/constants.d.ts +0 -1
- package/components/layout/Row/constants.js +0 -4
- package/components/layout/Row/index.d.ts +0 -2
- package/components/layout/index.d.ts +0 -4
- package/components/templates/SkeletonSearch/SkeletonSearch.d.ts +0 -2
- package/components/templates/SkeletonSearch/SkeletonSearch.js +0 -30
- package/components/templates/SkeletonSearch/SkeletonSearch.types.d.ts +0 -6
- package/components/templates/SkeletonSearch/SkeletonSearchStyled.d.ts +0 -11
- package/components/templates/SkeletonSearch/SkeletonSearchStyled.js +0 -97
- package/components/templates/SkeletonSearch/constants.d.ts +0 -2
- package/components/templates/SkeletonSearch/constants.js +0 -5
- package/components/templates/SkeletonSearch/index.d.ts +0 -2
- package/components/templates/index.d.ts +0 -1
- package/components/widget/DragAndDrop/DragAndDrop.d.ts +0 -4
- package/components/widget/DragAndDrop/DragAndDrop.js +0 -74
- package/components/widget/DragAndDrop/DragAndDrop.types.d.ts +0 -35
- package/components/widget/DragAndDrop/DragAndDropStyled.d.ts +0 -6
- package/components/widget/DragAndDrop/DragAndDropStyled.js +0 -61
- package/components/widget/DragAndDrop/constants.d.ts +0 -1
- package/components/widget/DragAndDrop/constants.js +0 -4
- package/components/widget/DragAndDrop/index.d.ts +0 -2
- package/components/widget/DragAndDrop/utils/index.d.ts +0 -1
- package/components/widget/DragAndDrop/utils/validators.d.ts +0 -5
- package/components/widget/DragAndDrop/utils/validators.js +0 -17
- package/components/widget/index.d.ts +0 -1
- package/constants/index.d.ts +0 -3
- package/constants/keyboard.d.ts +0 -8
- package/constants/keyboard.js +0 -11
- package/constants/positioning.d.ts +0 -9
- package/constants/positioning.js +0 -11
- package/constants/timers.d.ts +0 -2
- package/constants/timers.js +0 -5
- package/hooks/index.d.ts +0 -6
- package/hooks/useAutoFocus/index.d.ts +0 -1
- package/hooks/useAutoFocus/useAutoFocus.d.ts +0 -2
- package/hooks/useAutoFocus/useAutoFocus.js +0 -11
- package/hooks/useCarousel/index.d.ts +0 -1
- package/hooks/useCarousel/useCarousel.d.ts +0 -23
- package/hooks/useCarousel/useCarousel.js +0 -61
- package/hooks/useClickOutside/index.d.ts +0 -1
- package/hooks/useClickOutside/useClickOutside.d.ts +0 -1
- package/hooks/useClickOutside/useClickOutside.js +0 -15
- package/hooks/useKeyControls/index.d.ts +0 -1
- package/hooks/useKeyControls/useKeyControls.d.ts +0 -2
- package/hooks/useKeyControls/useKeyControls.js +0 -19
- package/hooks/useMediaQuery/index.d.ts +0 -1
- package/hooks/useMediaQuery/useMediaQuery.d.ts +0 -1
- package/hooks/useMediaQuery/useMediaQuery.js +0 -14
- package/hooks/useTheme/index.d.ts +0 -4
- package/hooks/useTheme/useTheme.d.ts +0 -4
- package/hooks/useTheme/useTheme.js +0 -48
- package/hooks/useTheme/useTheme.types.d.ts +0 -14
- package/hooks/useTheme/utils.d.ts +0 -2
- package/hooks/useTheme/utils.js +0 -10
- package/stories/Introduction/ThemeJsonPreview.d.ts +0 -4
- package/stories/components/TokenViewer/TokenViewer.d.ts +0 -2
- package/stories/components/TokenViewer/TokenViewer.types.d.ts +0 -12
- package/stories/components/TokenViewer/TokenViewerStyled.d.ts +0 -11
- package/stories/components/TokenViewer/index.d.ts +0 -1
- package/tokens/accordion.d.ts +0 -62
- package/tokens/accordion.js +0 -72
- package/tokens/animations.d.ts +0 -60
- package/tokens/animations.js +0 -63
- package/tokens/avatar.d.ts +0 -120
- package/tokens/avatar.js +0 -153
- package/tokens/borders.d.ts +0 -9
- package/tokens/borders.js +0 -17
- package/tokens/breadcrumbs.d.ts +0 -30
- package/tokens/breadcrumbs.js +0 -37
- package/tokens/breakpoints.d.ts +0 -8
- package/tokens/breakpoints.js +0 -12
- package/tokens/button.d.ts +0 -155
- package/tokens/button.js +0 -200
- package/tokens/card.d.ts +0 -175
- package/tokens/card.js +0 -187
- package/tokens/carousel.d.ts +0 -197
- package/tokens/carousel.js +0 -208
- package/tokens/chat.d.ts +0 -128
- package/tokens/chat.js +0 -126
- package/tokens/chatbubble.d.ts +0 -48
- package/tokens/chatbubble.js +0 -75
- package/tokens/colors.d.ts +0 -154
- package/tokens/colors.js +0 -157
- package/tokens/column.d.ts +0 -6
- package/tokens/column.js +0 -9
- package/tokens/constants.d.ts +0 -2
- package/tokens/constants.js +0 -4
- package/tokens/counter.d.ts +0 -38
- package/tokens/counter.js +0 -45
- package/tokens/cursors.d.ts +0 -17
- package/tokens/cursors.js +0 -20
- package/tokens/defaultTheme.d.ts +0 -3791
- package/tokens/defaultTheme.js +0 -123
- package/tokens/display.d.ts +0 -16
- package/tokens/display.js +0 -19
- package/tokens/draganddrop.d.ts +0 -61
- package/tokens/draganddrop.js +0 -87
- package/tokens/draganddropfiles.d.ts +0 -3
- package/tokens/draganddropfiles.js +0 -6
- package/tokens/flexContainer.d.ts +0 -9
- package/tokens/flexContainer.js +0 -13
- package/tokens/font.d.ts +0 -47
- package/tokens/font.js +0 -52
- package/tokens/form.d.ts +0 -3
- package/tokens/form.js +0 -6
- package/tokens/header.d.ts +0 -107
- package/tokens/header.js +0 -123
- package/tokens/icon.d.ts +0 -28
- package/tokens/icon.js +0 -32
- package/tokens/image.d.ts +0 -31
- package/tokens/image.js +0 -40
- package/tokens/index.d.ts +0 -3390
- package/tokens/index.js +0 -145
- package/tokens/inlineNotification.d.ts +0 -62
- package/tokens/inlineNotification.js +0 -75
- package/tokens/input.d.ts +0 -212
- package/tokens/input.js +0 -191
- package/tokens/inputfile.d.ts +0 -14
- package/tokens/inputfile.js +0 -18
- package/tokens/label.d.ts +0 -6
- package/tokens/label.js +0 -10
- package/tokens/link.d.ts +0 -80
- package/tokens/link.js +0 -66
- package/tokens/list.d.ts +0 -89
- package/tokens/list.js +0 -87
- package/tokens/loader.d.ts +0 -135
- package/tokens/loader.js +0 -143
- package/tokens/menu.d.ts +0 -15
- package/tokens/menu.js +0 -19
- package/tokens/modal.d.ts +0 -89
- package/tokens/modal.js +0 -112
- package/tokens/price.d.ts +0 -23
- package/tokens/price.js +0 -32
- package/tokens/progressbar.d.ts +0 -51
- package/tokens/progressbar.js +0 -60
- package/tokens/radiogroup.d.ts +0 -80
- package/tokens/radiogroup.js +0 -110
- package/tokens/radius.d.ts +0 -10
- package/tokens/radius.js +0 -14
- package/tokens/rating.d.ts +0 -65
- package/tokens/rating.js +0 -73
- package/tokens/reset.d.ts +0 -1
- package/tokens/reset.js +0 -4
- package/tokens/row.d.ts +0 -5
- package/tokens/row.js +0 -8
- package/tokens/scroll.d.ts +0 -91
- package/tokens/scroll.js +0 -99
- package/tokens/search.d.ts +0 -39
- package/tokens/search.js +0 -45
- package/tokens/searchModal.d.ts +0 -155
- package/tokens/searchModal.js +0 -159
- package/tokens/select.d.ts +0 -93
- package/tokens/select.js +0 -108
- package/tokens/separator.d.ts +0 -56
- package/tokens/separator.js +0 -63
- package/tokens/shadow.d.ts +0 -20
- package/tokens/shadow.js +0 -25
- package/tokens/skeleton.d.ts +0 -68
- package/tokens/skeleton.js +0 -77
- package/tokens/slider.d.ts +0 -58
- package/tokens/slider.js +0 -45
- package/tokens/snackbar.d.ts +0 -157
- package/tokens/snackbar.js +0 -177
- package/tokens/spacing.d.ts +0 -9
- package/tokens/spacing.js +0 -13
- package/tokens/stepper.d.ts +0 -132
- package/tokens/stepper.js +0 -147
- package/tokens/switch.d.ts +0 -67
- package/tokens/switch.js +0 -75
- package/tokens/tabs.d.ts +0 -88
- package/tokens/tabs.js +0 -110
- package/tokens/textarea.d.ts +0 -44
- package/tokens/textarea.js +0 -47
- package/tokens/toggle.d.ts +0 -9
- package/tokens/toggle.js +0 -19
- package/tokens/tooltip.d.ts +0 -61
- package/tokens/tooltip.js +0 -68
- package/tokens/types/index.types.d.ts +0 -14
- package/tokens/types/index.types.js +0 -4
- package/tokens/typography.d.ts +0 -127
- package/tokens/typography.js +0 -134
- package/tokens/utils.d.ts +0 -47
- package/tokens/utils.js +0 -88
- package/tokens/values.d.ts +0 -65
- package/tokens/values.js +0 -76
- package/tokens/wrapper.d.ts +0 -29
- package/tokens/wrapper.js +0 -34
- package/types/accesability.d.ts +0 -5
- package/types/accesability.js +0 -4
- package/types/button.d.ts +0 -28
- package/types/button.js +0 -7
- package/types/card.d.ts +0 -8
- package/types/card.js +0 -5
- package/types/carousel.d.ts +0 -12
- package/types/carousel.js +0 -6
- package/types/chat.d.ts +0 -5
- package/types/chat.js +0 -4
- package/types/common.d.ts +0 -12
- package/types/common.js +0 -5
- package/types/cursors.d.ts +0 -14
- package/types/cursors.js +0 -4
- package/types/index.d.ts +0 -21
- package/types/input.d.ts +0 -30
- package/types/input.js +0 -6
- package/types/keys.d.ts +0 -8
- package/types/label.d.ts +0 -4
- package/types/label.js +0 -4
- package/types/layout.d.ts +0 -8
- package/types/layout.js +0 -4
- package/types/link.d.ts +0 -18
- package/types/link.js +0 -5
- package/types/list.d.ts +0 -6
- package/types/list.js +0 -4
- package/types/misc.d.ts +0 -17
- package/types/separator.d.ts +0 -10
- package/types/separator.js +0 -5
- package/types/skeleton.d.ts +0 -5
- package/types/skeleton.js +0 -4
- package/types/snackbar.d.ts +0 -14
- package/types/snackbar.js +0 -5
- package/types/stepper.d.ts +0 -9
- package/types/stepper.js +0 -5
- package/types/styles.d.ts +0 -3
- package/types/typography.d.ts +0 -45
- package/types/typography.js +0 -6
- package/types/wrapper.d.ts +0 -5
- package/types/wrapper.js +0 -4
- package/utils/animationFrame.d.ts +0 -15
- package/utils/animationFrame.js +0 -17
- package/utils/common.d.ts +0 -2
- package/utils/common.js +0 -4
- package/utils/date.d.ts +0 -9
- package/utils/date.js +0 -11
- package/utils/focus.d.ts +0 -32
- package/utils/focus.js +0 -54
- package/utils/getCharCount.d.ts +0 -3
- package/utils/helpers.d.ts +0 -13
- package/utils/helpers.js +0 -49
- package/utils/index.d.ts +0 -10
- package/utils/layout.d.ts +0 -6
- package/utils/layout.js +0 -32
- package/utils/math.d.ts +0 -6
- package/utils/math.js +0 -11
- package/utils/setInRange.d.ts +0 -5
- package/utils/setInRange.js +0 -11
- package/utils/uniqueKeys.d.ts +0 -1
- package/utils/uniqueKeys.js +0 -4
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Input",
|
|
3
|
-
import: "import { Input } from 'gd-design-library'",
|
|
4
|
-
description: "Versatile form input component supporting multiple field types including text, email, password, checkbox, radio, and more. Includes built-in label, helper text, and adornment support.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "variant",
|
|
7
|
-
type: "InputVariantType",
|
|
8
|
-
description: "Input field type variant (text, email, password, number, checkbox, radio, etc.)",
|
|
9
|
-
default: "InputVariantType.Text",
|
|
10
|
-
enum: ["text", "email", "password", "number", "checkbox", "radio", "tel", "url", "search"]
|
|
11
|
-
}, {
|
|
12
|
-
name: "wrapperAs",
|
|
13
|
-
type: "keyof HTMLElementTagNameMap | ElementType",
|
|
14
|
-
description: "HTML element or component to wrap the input",
|
|
15
|
-
default: "label"
|
|
16
|
-
}, {
|
|
17
|
-
name: "color",
|
|
18
|
-
type: "InputColorVariant",
|
|
19
|
-
description: "Color variant of the input",
|
|
20
|
-
default: "InputColorVariant.Primary",
|
|
21
|
-
enum: ["primary", "secondary", "success", "warning", "error", "info"]
|
|
22
|
-
}, {
|
|
23
|
-
name: "role",
|
|
24
|
-
type: "InputRole",
|
|
25
|
-
description: "ARIA role of the input element",
|
|
26
|
-
default: "InputRole.Textbox",
|
|
27
|
-
enum: ["textbox", "searchbox", "combobox", "spinbutton"]
|
|
28
|
-
}, {
|
|
29
|
-
name: "name",
|
|
30
|
-
type: "string",
|
|
31
|
-
description: "Input field name attribute for form submission",
|
|
32
|
-
default: "input"
|
|
33
|
-
}, {
|
|
34
|
-
name: "width",
|
|
35
|
-
type: "string",
|
|
36
|
-
description: "Width of the input field",
|
|
37
|
-
default: "100%"
|
|
38
|
-
}, {
|
|
39
|
-
name: "disabled",
|
|
40
|
-
type: "boolean",
|
|
41
|
-
description: "Disabled state of the input",
|
|
42
|
-
default: !1
|
|
43
|
-
}, {
|
|
44
|
-
name: "required",
|
|
45
|
-
type: "boolean",
|
|
46
|
-
description: "Required state of the input for form validation",
|
|
47
|
-
default: !1
|
|
48
|
-
}, {
|
|
49
|
-
name: "readOnly",
|
|
50
|
-
type: "boolean",
|
|
51
|
-
description: "Read-only state of the input",
|
|
52
|
-
default: !1
|
|
53
|
-
}, {
|
|
54
|
-
name: "checked",
|
|
55
|
-
type: "boolean",
|
|
56
|
-
description: "Checked state for checkbox/radio inputs",
|
|
57
|
-
default: !1
|
|
58
|
-
}, {
|
|
59
|
-
name: "placeholder",
|
|
60
|
-
type: "string",
|
|
61
|
-
description: "Placeholder text shown when input is empty",
|
|
62
|
-
default: "placeholder"
|
|
63
|
-
}, {
|
|
64
|
-
name: "defaultValue",
|
|
65
|
-
type: "string",
|
|
66
|
-
description: "Default value of the input",
|
|
67
|
-
default: "defaultValue"
|
|
68
|
-
}, {
|
|
69
|
-
name: "value",
|
|
70
|
-
type: "string",
|
|
71
|
-
description: "Controlled value of the input"
|
|
72
|
-
}, {
|
|
73
|
-
name: "tabIndex",
|
|
74
|
-
type: "number",
|
|
75
|
-
description: "Tab index for keyboard navigation",
|
|
76
|
-
default: 0
|
|
77
|
-
}, {
|
|
78
|
-
name: "className",
|
|
79
|
-
type: "string",
|
|
80
|
-
description: "Additional CSS classes to apply",
|
|
81
|
-
default: ""
|
|
82
|
-
}, {
|
|
83
|
-
name: "ariaRequired",
|
|
84
|
-
type: "boolean",
|
|
85
|
-
description: "ARIA required attribute for accessibility",
|
|
86
|
-
default: !1
|
|
87
|
-
}, {
|
|
88
|
-
name: "ariaDescribedBy",
|
|
89
|
-
type: "string",
|
|
90
|
-
description: "ARIA describedby attribute linking to helper text",
|
|
91
|
-
default: "elementId"
|
|
92
|
-
}, {
|
|
93
|
-
name: "debounceCallbackTime",
|
|
94
|
-
type: "number",
|
|
95
|
-
description: "Debounce timeout in milliseconds for onChange callback",
|
|
96
|
-
default: 300
|
|
97
|
-
}, {
|
|
98
|
-
name: "styles",
|
|
99
|
-
type: "React.CSSProperties",
|
|
100
|
-
description: "Custom styles object for the input",
|
|
101
|
-
default: {}
|
|
102
|
-
}, {
|
|
103
|
-
name: "adornmentStart",
|
|
104
|
-
type: "ReactNode",
|
|
105
|
-
description: "Start adornment element (icon, prefix, etc.)"
|
|
106
|
-
}, {
|
|
107
|
-
name: "adornmentEnd",
|
|
108
|
-
type: "ReactNode",
|
|
109
|
-
description: "End adornment element (icon, button, etc.)"
|
|
110
|
-
}, {
|
|
111
|
-
name: "label",
|
|
112
|
-
type: "string",
|
|
113
|
-
description: "Input label text displayed above the field"
|
|
114
|
-
}, {
|
|
115
|
-
name: "helperText",
|
|
116
|
-
type: "string",
|
|
117
|
-
description: "Helper text displayed below the input for guidance"
|
|
118
|
-
}, {
|
|
119
|
-
name: "onChange",
|
|
120
|
-
type: "(event: ChangeEvent<HTMLInputElement>) => void",
|
|
121
|
-
description: "onChange event handler triggered when input value changes"
|
|
122
|
-
}, {
|
|
123
|
-
name: "onFocus",
|
|
124
|
-
type: "(event: FocusEvent<HTMLInputElement>) => void",
|
|
125
|
-
description: "onFocus event handler triggered when input receives focus"
|
|
126
|
-
}, {
|
|
127
|
-
name: "onBlur",
|
|
128
|
-
type: "(event: FocusEvent<HTMLInputElement>) => void",
|
|
129
|
-
description: "onBlur event handler triggered when input loses focus"
|
|
130
|
-
}, {
|
|
131
|
-
name: "onClick",
|
|
132
|
-
type: "(event: MouseEvent<HTMLInputElement>) => void",
|
|
133
|
-
description: "onClick event handler triggered when input is clicked"
|
|
134
|
-
}],
|
|
135
|
-
examples: ['<Input variant={InputVariantType.Email} label="Email Address" placeholder="user@example.com" required />', '<Input variant={InputVariantType.Password} label="Password" helperText="Must be at least 8 characters" />', '<Input variant={InputVariantType.Text} adornmentStart={<Icon name="search" />} placeholder="Search..." />', '<Input variant={InputVariantType.Checkbox} label="Remember me" checked={isChecked} onChange={handleChange} />']
|
|
136
|
-
}, t = ["Use Input variant={InputVariantType.Email} for email fields to enable browser validation and mobile keyboard optimization.", "Apply Input variant={InputVariantType.Password} for password fields to mask input and enable password managers.", "Set Input variant={InputVariantType.Number} for numeric inputs to show number pad on mobile devices.", "Use Input variant={InputVariantType.Tel} for phone numbers to trigger telephone keypad on mobile.", "Apply Input variant={InputVariantType.Url} for website URLs to enable URL validation and appropriate keyboard.", "Use Input variant={InputVariantType.Search} with adornmentStart icon for search fields with clear button support.", "Set Input variant={InputVariantType.Checkbox} for boolean selections and pair with label prop for accessibility.", "Use Input variant={InputVariantType.Radio} for single choice from multiple options within a radio group.", "Apply Input required prop for mandatory fields and ariaRequired for screen reader support.", "Use Input disabled prop to prevent interaction during form submission or based on conditions.", "Set Input readOnly prop for display-only fields that users can select but not modify.", "Apply Input helperText to provide context, format examples, or validation messages below the field.", "Use Input label prop for built-in label support instead of separate Typography components.", 'Set Input placeholder with example format (e.g., "MM/DD/YYYY") to guide user input.', "Apply Input adornmentStart for currency symbols, icons, or country codes as visual prefixes.", "Use Input adornmentEnd for action buttons (show password), status icons, or unit labels.", "Set Input debounceCallbackTime to optimize performance for search or auto-save features.", "Apply Input color={InputColorVariant.Error} with helperText for validation error states.", "Use Input color={InputColorVariant.Success} to indicate valid input or successful verification.", "Set Input width prop to control field size, use percentages for responsive layouts.", "Apply Input className for reusable styling patterns across similar form fields.", "Use Input tabIndex to control keyboard navigation order in complex forms.", "Set Input ariaDescribedBy to link input with error messages or helper text for screen readers.", "Apply Input defaultValue for uncontrolled components with initial values.", "Use Input value with onChange for controlled components with state management.", "Combine Input onFocus and onBlur for field-level validation and formatting.", 'Set Input wrapperAs="div" when label element is not appropriate for the layout.', "Apply Input role={InputRole.Searchbox} for search inputs to improve accessibility.", "Use Input role={InputRole.Spinbutton} for numeric inputs with increment/decrement controls.", "Group related Input components with variant={InputVariantType.Radio} using same name attribute.", "Apply Input styles prop for one-off custom styling without creating CSS classes.", "Use Input with Column or FlexContainer for well-organized form layouts with consistent spacing.", "Set Input disabled during async operations to prevent multiple submissions.", "Apply Input required with visual indicators (asterisk) in label for clear user guidance.", "Use Input helperText to show character count for inputs with length restrictions.", "Combine Input variant={InputVariantType.Password} with strength indicator in helperText.", "Apply Input adornmentEnd with clear button for search and filter inputs.", "Use Input onChange with debounceCallbackTime for real-time search suggestions.", "Set Input readOnly with adornmentEnd copy button for sharing or reference fields.", "Apply consistent Input width across form fields for visual alignment.", "Use Input color variants to match form validation states with visual feedback.", "Combine multiple Input components with consistent spacing using Column gutter prop.", "Apply Input ariaRequired={true} even when required={false} for accessibility-only validation.", "Use Input placeholder sparingly, prefer label and helperText for important information.", "Set Input autoComplete attributes appropriately for better user experience and security.", "Apply Input maxLength attribute for fields with character limits.", "Use Input pattern attribute with variant={InputVariantType.Text} for custom validation.", "Combine Input components with Button in FlexContainer for inline form actions.", "Apply Input disabled selectively based on user permissions or feature flags.", "Use Input with consistent color variants across the application for unified UX.", 'Pair Input fields with Button type="submit" for form submission handling.'], n = {
|
|
137
|
-
component: e,
|
|
138
|
-
compositionTips: t
|
|
139
|
-
};
|
|
140
|
-
export {
|
|
141
|
-
n as default
|
|
142
|
-
};
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "InputFile",
|
|
3
|
-
import: "import { InputFile } from 'gd-design-library'",
|
|
4
|
-
description: "File upload component that wraps native file input with a customizable button interface for selecting and uploading files.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "accept",
|
|
7
|
-
type: "string",
|
|
8
|
-
description: 'Accepted file types specified as MIME types or file extensions (e.g., "image/*", ".pdf", ".doc,.docx")'
|
|
9
|
-
}, {
|
|
10
|
-
name: "capture",
|
|
11
|
-
type: "string",
|
|
12
|
-
description: "Preferred media capture method on mobile devices for camera/microphone access",
|
|
13
|
-
enum: ["user", "environment"]
|
|
14
|
-
}, {
|
|
15
|
-
name: "multiple",
|
|
16
|
-
type: "boolean",
|
|
17
|
-
description: "Allow selection of multiple files at once",
|
|
18
|
-
default: !1
|
|
19
|
-
}, {
|
|
20
|
-
name: "disabled",
|
|
21
|
-
type: "boolean",
|
|
22
|
-
description: "Disable the file input and button preventing user interaction",
|
|
23
|
-
default: !1
|
|
24
|
-
}, {
|
|
25
|
-
name: "styles",
|
|
26
|
-
type: "CSSProperties",
|
|
27
|
-
description: "CSS style overrides for the wrapper element containing the input and button",
|
|
28
|
-
default: {}
|
|
29
|
-
}, {
|
|
30
|
-
name: "buttonProps",
|
|
31
|
-
type: "ButtonProps",
|
|
32
|
-
description: "Props to customize the Button component appearance and behavior (variant, color, icons, etc.)",
|
|
33
|
-
default: {}
|
|
34
|
-
}, {
|
|
35
|
-
name: "children",
|
|
36
|
-
type: "ReactNode",
|
|
37
|
-
description: 'Content for the button label, typically text like "Browse Files" or "Upload"',
|
|
38
|
-
default: "Browse Files"
|
|
39
|
-
}, {
|
|
40
|
-
name: "onClick",
|
|
41
|
-
type: "(event: MouseEvent<HTMLInputElement>) => void",
|
|
42
|
-
description: "Callback fired when the button is clicked, before file selection dialog opens"
|
|
43
|
-
}, {
|
|
44
|
-
name: "onChange",
|
|
45
|
-
type: "(event: ChangeEvent<HTMLInputElement>) => void",
|
|
46
|
-
description: "Callback fired when files are selected, receives event with file list in event.target.files"
|
|
47
|
-
}],
|
|
48
|
-
examples: ['<InputFile accept="image/*" onChange={handleImageUpload}>Upload Photo</InputFile>', '<InputFile accept=".pdf,.doc,.docx" multiple onChange={handleDocuments} buttonProps={{variant: "outlined", iconStart: <Icon name="upload" />}}>Select Documents</InputFile>', '<InputFile capture="user" accept="image/*" onChange={handleSelfie}>Take Selfie</InputFile>', '<InputFile accept="video/*" buttonProps={{color: "primary", fullWidth: true}} disabled={isUploading}>Choose Video</InputFile>']
|
|
49
|
-
}, t = ['Use InputFile accept="image/*" to restrict uploads to image files only for photo uploads.', "Set InputFile multiple={true} to allow batch file selection for bulk upload features.", "Combine InputFile with onChange handler to validate file size and type before upload.", "Use InputFile buttonProps to customize button appearance matching your form design.", "Apply InputFile with InlineNotification to show upload success or error messages.", "Use InputFile onChange to preview selected images before final upload.", "Apply InputFile with progress indicator for large file upload feedback.", 'Use InputFile with accept="image/*" to restrict uploads to image files only for photo uploads.', 'Apply InputFile accept=".pdf" or accept="application/pdf" for document-specific upload fields.', "Set InputFile multiple={true} to allow batch file selection for bulk upload features.", 'Use InputFile capture="user" with accept="image/*" for selfie capture on mobile devices.', 'Apply InputFile capture="environment" for rear camera capture in mobile web apps.', "Combine InputFile with onChange handler to validate file size and type before upload.", "Use InputFile buttonProps to customize button appearance matching your form design.", 'Set InputFile buttonProps={{variant: "outlined"}} for secondary file upload actions.', 'Apply InputFile buttonProps={{iconStart: <Icon name="upload" />}} for visual upload indicator.', "Use InputFile disabled={true} during file processing to prevent multiple uploads.", "Apply InputFile with InlineNotification to show upload success or error messages.", 'Set InputFile accept="image/*,video/*" for multimedia content upload fields.', "Use InputFile onChange to preview selected images before final upload.", "Apply InputFile with file size validation in onChange to enforce upload limits.", "Combine InputFile with progress indicator for large file upload feedback.", "Use InputFile buttonProps={{fullWidth: true}} for mobile-optimized upload buttons.", 'Set InputFile accept=".csv,.xlsx" for spreadsheet data import features.', "Apply InputFile with drag-and-drop zone wrapper for enhanced upload UX.", "Use InputFile multiple with file count display showing selected files.", "Apply InputFile onChange to read file contents with FileReader API for client-side processing.", "Set InputFile styles prop to position file input within custom layouts.", "Use InputFile with form validation to ensure required files are selected.", 'Apply InputFile accept="audio/*" for audio recording and upload features.', "Combine InputFile with thumbnail generation for image upload previews.", 'Use InputFile buttonProps={{color: "primary"}} for primary upload actions.', "Set InputFile with clear/reset functionality to remove selected files.", "Apply InputFile with file type icons based on accept attribute for visual clarity.", "Use InputFile onChange to update form state with selected file information.", "Apply InputFile with maximum file size display in button label or helper text.", "Set InputFile accept with specific MIME types for precise file filtering.", "Use InputFile with chunked upload implementation for large file handling.", "Apply InputFile disabled based on user permissions or subscription limits.", "Combine InputFile with compression logic for image optimization before upload.", "Use InputFile with virus scanning integration for secure file uploads.", 'Set InputFile buttonProps={{variant: "contained"}} for prominent upload CTAs.', "Apply InputFile with metadata extraction for EXIF data from photos.", "Use InputFile onChange to validate file dimensions for image requirements.", "Apply InputFile with upload queue management for multiple file handling.", "Set InputFile with custom accept string for proprietary file formats.", "Use InputFile with localized button text via children prop for i18n support.", "Apply InputFile with retry mechanism for failed upload attempts.", "Combine InputFile with cloud storage integration for direct uploads.", "Use InputFile buttonProps={{isIcon: true}} for compact upload buttons in toolbars.", "Set InputFile with file rename capability before upload.", "Apply InputFile with duplicate file detection to prevent redundant uploads.", "Use InputFile onChange with immediate upload trigger for seamless UX.", "Apply InputFile with cancel upload functionality for long-running transfers.", "Set InputFile with resume capability for interrupted uploads.", "Use InputFile with encryption for sensitive file uploads.", "Apply InputFile with signed URL generation for secure cloud uploads."], i = {
|
|
50
|
-
component: e,
|
|
51
|
-
compositionTips: t
|
|
52
|
-
};
|
|
53
|
-
export {
|
|
54
|
-
i as default
|
|
55
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Label",
|
|
3
|
-
import: "import { Label } from 'gd-design-library'",
|
|
4
|
-
description: "Semantic label component for form controls providing accessible text labels with customizable spacing and interaction support.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "gap",
|
|
7
|
-
type: "string",
|
|
8
|
-
description: "Space between label elements when containing multiple children",
|
|
9
|
-
default: "4px"
|
|
10
|
-
}, {
|
|
11
|
-
name: "children",
|
|
12
|
-
type: "ReactNode",
|
|
13
|
-
description: "Content to be rendered inside the label, typically text or text with form controls"
|
|
14
|
-
}, {
|
|
15
|
-
name: "className",
|
|
16
|
-
type: "string",
|
|
17
|
-
description: "Additional CSS classes to apply for custom styling"
|
|
18
|
-
}, {
|
|
19
|
-
name: "onClick",
|
|
20
|
-
type: "(event: React.MouseEvent) => void",
|
|
21
|
-
description: "Click event handler for the label, useful for custom interactions"
|
|
22
|
-
}, {
|
|
23
|
-
name: "styles",
|
|
24
|
-
type: "CSSProperties",
|
|
25
|
-
description: "Custom inline styles to apply to the label element",
|
|
26
|
-
default: {}
|
|
27
|
-
}, {
|
|
28
|
-
name: "htmlFor",
|
|
29
|
-
type: "string",
|
|
30
|
-
description: "Associates the label with a form control by its id for accessibility"
|
|
31
|
-
}, {
|
|
32
|
-
name: "ariaLabel",
|
|
33
|
-
type: "string",
|
|
34
|
-
description: "Accessible label for screen readers when visual label is not sufficient"
|
|
35
|
-
}],
|
|
36
|
-
examples: ['<Label htmlFor="email-input">Email Address</Label>', '<Label gap="8px"><Input type="checkbox" /> Remember me</Label>', '<Label htmlFor="password" className="required-field">Password *</Label>', '<Label styles={{fontWeight: "bold"}} htmlFor="username">Username</Label>']
|
|
37
|
-
}, t = ["Use Label with htmlFor prop to associate with Input id for proper accessibility and click behavior.", "Apply Label gap prop to control spacing between label text and inline form controls like checkboxes.", "Use Label above Input components for traditional vertical form layouts.", "Combine Label with Tooltip for additional help text on hover without cluttering the UI.", 'Set Label styles={{display: "block"}} for full-width labels above inputs.', "Use Label with htmlFor prop to associate with Input id for proper accessibility and click behavior.", "Apply Label gap prop to control spacing between label text and inline form controls like checkboxes.", "Set Label htmlFor matching Input id to enable clicking label to focus the input field.", "Use Label with Typography inside for styled label text with consistent font variants.", "Apply Label className for reusable label styling patterns across forms.", 'Combine Label with Input type="checkbox" or "radio" as children for inline selection controls.', "Use Label styles prop for one-off custom styling without creating CSS classes.", "Set Label ariaLabel when the visible label text needs additional context for screen readers.", 'Apply Label with required field indicators using children like "Field Name *" or icons.', "Use Label above Input components for traditional vertical form layouts.", 'Combine Label gap="8px" or "12px" for comfortable spacing in inline checkbox/radio layouts.', "Apply Label onClick handler for custom label interactions beyond default form control focus.", "Use Label with consistent styling for all form fields to maintain visual coherence.", "Set Label htmlFor with dynamically generated ids for programmatically created forms.", "Apply Label with FlexContainer or Column for complex label layouts with icons or badges.", "Use Label without htmlFor when wrapping form controls directly as children.", "Combine Label with Tooltip for additional help text on hover without cluttering the UI.", "Apply Label with conditional rendering for optional fields based on form state.", 'Use Label styles={{display: "block"}} for full-width labels above inputs.', "Set Label with error state styling when associated Input has validation errors.", "Apply Label with Icon components in children for visual indicators of field purpose.", 'Use Label gap="0" when no spacing is needed between label elements.', "Combine Label with InlineNotification below for field-specific error messages.", "Apply Label consistently with Input label prop for unified form field presentation.", "Use Label with screen reader only text using CSS for additional accessibility context.", "Set Label with data attributes for form field analytics and tracking.", "Apply Label with consistent font weight for required vs optional field differentiation.", 'Use Label as wrapper for Input type="radio" groups with proper accessibility.', "Combine Label with Badge components for field status or count indicators.", "Apply Label with text truncation styles for long labels in constrained layouts."], o = {
|
|
38
|
-
component: e,
|
|
39
|
-
compositionTips: t
|
|
40
|
-
};
|
|
41
|
-
export {
|
|
42
|
-
o as default
|
|
43
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
const i = {
|
|
2
|
-
name: "Link",
|
|
3
|
-
import: "import { Link } from 'gd-design-library'",
|
|
4
|
-
description: "Accessible anchor component for navigation with support for internal and external links, multiple visual variants, and proper security attributes.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "variant",
|
|
7
|
-
type: "LinkVariant",
|
|
8
|
-
description: "Visual style variant of the link",
|
|
9
|
-
default: "LinkVariant.Primary",
|
|
10
|
-
enum: ["primary", "secondary", "tertiary", "inline", "nav", "footer"]
|
|
11
|
-
}, {
|
|
12
|
-
name: "href",
|
|
13
|
-
type: "string",
|
|
14
|
-
description: "URL or destination for the link",
|
|
15
|
-
required: !0
|
|
16
|
-
}, {
|
|
17
|
-
name: "target",
|
|
18
|
-
type: "LinkTarget",
|
|
19
|
-
description: "Target window behavior for the link",
|
|
20
|
-
enum: ["_self", "_blank", "_parent", "_top"]
|
|
21
|
-
}, {
|
|
22
|
-
name: "rel",
|
|
23
|
-
type: "string",
|
|
24
|
-
description: "Relationship attribute for the link",
|
|
25
|
-
default: ""
|
|
26
|
-
}, {
|
|
27
|
-
name: "external",
|
|
28
|
-
type: "boolean",
|
|
29
|
-
description: "Indicates if the link points to an external resource",
|
|
30
|
-
default: !1
|
|
31
|
-
}, {
|
|
32
|
-
name: "disabled",
|
|
33
|
-
type: "boolean",
|
|
34
|
-
description: "Disables the link interaction",
|
|
35
|
-
default: !1
|
|
36
|
-
}, {
|
|
37
|
-
name: "children",
|
|
38
|
-
type: "ReactNode",
|
|
39
|
-
description: "Content to be rendered inside the link",
|
|
40
|
-
required: !0
|
|
41
|
-
}, {
|
|
42
|
-
name: "className",
|
|
43
|
-
type: "string",
|
|
44
|
-
description: "Additional CSS classes to apply"
|
|
45
|
-
}, {
|
|
46
|
-
name: "styles",
|
|
47
|
-
type: "CSSProperties",
|
|
48
|
-
description: "Custom inline styles to apply to the link",
|
|
49
|
-
default: {}
|
|
50
|
-
}],
|
|
51
|
-
examples: ['<Link href="/about" variant="primary">About Us</Link>', '<Link href="https://example.com" external target="_blank" rel="noopener noreferrer">External Site</Link>', '<Link href="#section" variant="inline">Jump to Section</Link>', '<Link href="/login" variant="nav" className="nav-item">Sign In</Link>']
|
|
52
|
-
}, n = ["Use Link for navigation between pages instead of Button with onClick handlers for better SEO.", 'Set Link external={true} and target="_blank" for external links to open in new tabs.', 'Apply Link rel="noopener noreferrer" with target="_blank" for security best practices.', 'Use Link variant="primary" for main navigation links and variant="secondary" for less prominent links.', 'Apply Link variant="inline" for links within body text to maintain reading flow.', 'Use Link variant="nav" for navigation menu items with consistent styling.', 'Set Link variant="footer" for footer links with subdued styling.', "Apply Link disabled={true} for temporarily unavailable navigation paths.", "Use Link with Typography as prop to combine text styling with link functionality.", "Set Link href with anchor fragments (#section) for same-page navigation.", "Apply Link className for consistent link styling across similar UI patterns.", "Use Link styles prop for one-off custom styling without creating CSS classes.", "Combine Link with Icon components in children for links with visual indicators.", "Apply Link external={true} to automatically add visual indicator for external links.", 'Use Link variant="tertiary" for less important or supplementary navigation options.', 'Set Link rel="nofollow" for links to untrusted content or user-generated destinations.', "Apply Link with consistent variants across navigation levels for visual hierarchy.", "Use Link href with mailto: protocol for email links that open mail clients.", "Set Link href with tel: protocol for phone number links on mobile devices.", "Apply Link with aria-label for icon-only links to improve accessibility.", "Use Link within Card components for clickable card patterns with proper semantics.", "Combine multiple Link components in FlexContainer for organized navigation bars.", "Apply Link with active state styling using className based on current route.", 'Use Link variant="inline" with underline styling for better visibility in text.', "Set Link tabIndex to control keyboard navigation order in complex layouts.", "Apply Link with router integration for client-side navigation in SPAs.", "Use Link disabled styling to indicate unavailable features or coming soon pages.", "Combine Link with Badge components for navigation items with notifications.", "Apply consistent Link hover states across all variants for predictable interaction.", 'Use Link with breadcrumb patterns using variant="inline" for hierarchical navigation.', 'Set Link role="button" when link triggers actions instead of navigation.', "Apply Link with visited state styling for better user orientation in content.", "Use Link prefetch or preload attributes for performance optimization.", "Combine Link with Tooltip for additional context on abbreviated link text.", "Apply Link with consistent focus styles for keyboard navigation accessibility.", "Use Link variant combinations with color props for state-based navigation items.", "Set Link with download attribute for file download links.", "Apply Link with consistent spacing using margin/padding for navigation layouts.", "Use Link within Typography components for rich text with embedded links.", "Combine Link with loading states when navigation triggers async operations.", "Apply Link with analytics tracking attributes for user behavior monitoring.", "Use Link with sitemap generation for better SEO and crawlability.", "Set Link with canonical URLs for proper SEO when multiple paths exist.", "Apply Link with structured data markup for enhanced search results.", "Use Link with proper heading hierarchy for accessible navigation structures.", "Combine Link components with dividers in navigation menus for visual grouping.", "Apply Link with keyboard shortcuts for power user navigation.", "Use Link with proper ARIA attributes for screen reader navigation announcements."], t = {
|
|
53
|
-
component: i,
|
|
54
|
-
compositionTips: n
|
|
55
|
-
};
|
|
56
|
-
export {
|
|
57
|
-
t as default
|
|
58
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
const t = {
|
|
2
|
-
name: "List",
|
|
3
|
-
import: "import { List } from 'gd-design-library'",
|
|
4
|
-
description: "Flexible list component for displaying collections of items with various style variants including unordered, ordered, and inline layouts.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "variant",
|
|
7
|
-
type: "ListVariant",
|
|
8
|
-
description: "Determines the style and structure of the list (unordered with bullets, ordered with numbers, or inline horizontal layout)",
|
|
9
|
-
default: "ListVariant.Unordered",
|
|
10
|
-
enum: ["unordered", "ordered", "inline"]
|
|
11
|
-
}, {
|
|
12
|
-
name: "items",
|
|
13
|
-
type: "Array<ReactNode>",
|
|
14
|
-
description: "Array of items to be rendered in the list, each item can be any React node including text, components, or complex structures",
|
|
15
|
-
required: !0,
|
|
16
|
-
default: []
|
|
17
|
-
}, {
|
|
18
|
-
name: "styles",
|
|
19
|
-
type: "CSSProperties",
|
|
20
|
-
description: "Custom styles to override default theme tokens and apply additional CSS properties to the list container",
|
|
21
|
-
default: {}
|
|
22
|
-
}, {
|
|
23
|
-
name: "className",
|
|
24
|
-
type: "string",
|
|
25
|
-
description: "Additional CSS class names to apply to the list element for custom styling or theme overrides",
|
|
26
|
-
default: ""
|
|
27
|
-
}],
|
|
28
|
-
examples: ['<List variant="unordered" items={["First item", "Second item", "Third item"]} />', '<List variant="ordered" items={steps.map(step => <Typography>{step}</Typography>)} />', '<List variant="inline" items={tags} className="tag-list" />', '<List items={features.map(f => <FlexContainer gap="8px"><Icon name={f.icon} /><Typography>{f.text}</Typography></FlexContainer>)} />']
|
|
29
|
-
}, i = ['Use List variant="unordered" for bullet lists and variant="ordered" for step-by-step instructions.', 'Apply List variant="inline" to display tags, chips, or compact item rows.', "Combine List items with Icon + Typography for richer visual lists.", "Use className to apply custom bullets, counters, or spacing utilities.", "Wrap long lists in Scroll to constrain height while keeping headers visible.", "Keep list item content consistent in height for clean vertical rhythm.", 'Use List variant="unordered" for feature lists, benefits, or any non-sequential information.', 'Apply List variant="ordered" for step-by-step instructions, rankings, or sequential processes.', 'Set List variant="inline" for horizontal lists like tags, breadcrumbs, or comma-separated values.', "Use List items with Typography components for consistent text styling across list items.", "Apply List with Icon components in items for visual list markers or category indicators.", "Combine List items with FlexContainer for complex list item layouts with icons and text.", "Use List className for applying consistent list styling patterns across the application.", "Set List styles prop for one-off customizations like spacing, colors, or typography.", 'Apply List variant="unordered" with custom bullet styles via CSS for branded list markers.', 'Use List variant="ordered" with start attribute in styles for continuing numbered lists.', "Combine List with Card component for organized content sections with listed information.", "Apply List items with Link components for navigation menus or resource lists.", 'Use List variant="inline" with separator styling for breadcrumb-like navigation patterns.', "Set List with nested List components in items for multi-level hierarchical lists.", "Apply List items with conditional rendering for dynamic list content based on state.", "Use List with consistent spacing between items using styles or CSS for visual rhythm.", 'Combine List variant="unordered" with InlineNotification items for error or warning lists.', "Apply List items with Button components for action lists or interactive menus.", 'Use List variant="ordered" for form validation error lists with numbered issues.', "Set List items with Badge components for status indicators or counts in list items.", "Apply List with Column wrapper for proper vertical spacing from surrounding content.", 'Use List variant="inline" with FlexContainer wrapper for alignment and distribution control.', "Combine List items with Checkbox inputs for multi-select lists or todo lists.", "Apply List with empty state message when items array is empty for better UX.", "Use List items with truncation styles for long text in constrained layouts.", "Set List variant based on semantic meaning: ordered for sequences, unordered for collections.", "Apply List with hover states on items for interactive list experiences.", "Use List items with React.Fragment for multiple elements per list item without wrapper.", "Combine List with filter/search functionality for long searchable lists.", 'Apply List variant="inline" with gap styles for consistent spacing between inline items.', "Use List with virtualization for performance optimization with thousands of items.", "Set List items with key props for efficient React rendering and updates.", "Apply List with drag-and-drop functionality for reorderable lists.", 'Use List variant="unordered" with indentation for sub-items in tree structures.', "Combine List with accordion pattern for collapsible list sections.", "Apply List items with loading skeletons while fetching dynamic content.", "Use List with pagination or infinite scroll for large datasets.", "Set List className with print styles for proper list formatting in printed documents.", "Apply List with ARIA attributes for improved screen reader accessibility.", 'Use List items with timestamps or metadata using Typography variant="caption".', "Combine List with sorting functionality for user-controlled list ordering.", 'Apply List variant="ordered" with reverse styles for countdown lists.', "Use List with consistent icon sizing in items for visual alignment.", "Set List items with alternating background colors for improved readability.", "Apply List with keyboard navigation support for accessible list interactions.", 'Use List variant="inline" as navigation with proper ARIA roles.', "Combine List with expand/collapse controls for detailed list items.", "Apply List items with progress indicators for task or process lists.", "Use List with data attributes for analytics tracking of list interactions."], e = {
|
|
30
|
-
component: t,
|
|
31
|
-
compositionTips: i
|
|
32
|
-
};
|
|
33
|
-
export {
|
|
34
|
-
e as default
|
|
35
|
-
};
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Loader",
|
|
3
|
-
import: "import { Loader } from 'gd-design-library'",
|
|
4
|
-
description: "Loading indicator component that displays animated spinners or dots to communicate loading states, with flexible wrapper options and size variants.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "name",
|
|
7
|
-
type: "LoaderName",
|
|
8
|
-
description: "Type of loader animation to display",
|
|
9
|
-
default: "circle",
|
|
10
|
-
enum: ["circle", "dots"]
|
|
11
|
-
}, {
|
|
12
|
-
name: "variant",
|
|
13
|
-
type: "WrapperVariant",
|
|
14
|
-
description: "Layout wrapper type that determines how the loader is positioned within its container",
|
|
15
|
-
default: "WrapperVariant.Inline",
|
|
16
|
-
enum: ["inline", "block", "flex", "absolute", "fixed"]
|
|
17
|
-
}, {
|
|
18
|
-
name: "size",
|
|
19
|
-
type: "SizeVariant",
|
|
20
|
-
description: "Size of the loader animation",
|
|
21
|
-
default: "SizeVariant.Md",
|
|
22
|
-
enum: ["xs", "sm", "md", "lg", "xl"]
|
|
23
|
-
}, {
|
|
24
|
-
name: "withWrapper",
|
|
25
|
-
type: "boolean",
|
|
26
|
-
description: "Whether to include a wrapper container around the loader for layout control",
|
|
27
|
-
default: !0
|
|
28
|
-
}, {
|
|
29
|
-
name: "children",
|
|
30
|
-
type: "ReactNode",
|
|
31
|
-
description: "Custom content to display inside or alongside the loader, such as loading text or progress indicators"
|
|
32
|
-
}, {
|
|
33
|
-
name: "styles",
|
|
34
|
-
type: "CSSProperties",
|
|
35
|
-
description: "Custom styles to override default theme tokens and apply additional CSS properties",
|
|
36
|
-
default: {}
|
|
37
|
-
}, {
|
|
38
|
-
name: "className",
|
|
39
|
-
type: "string",
|
|
40
|
-
description: "Additional CSS class names for custom styling or animations",
|
|
41
|
-
default: ""
|
|
42
|
-
}, {
|
|
43
|
-
name: "WrapperView",
|
|
44
|
-
type: "keyof HTMLElementTagNameMap | ElementType",
|
|
45
|
-
description: "Element type to use for the wrapper container when withWrapper is true",
|
|
46
|
-
default: "span"
|
|
47
|
-
}],
|
|
48
|
-
examples: ['<Loader name="circle" size="md" />', '<Loader name="dots" variant="block" size="lg" />', '<Loader name="circle" size="sm" withWrapper={false} />', '<Loader name="dots" variant="flex" size="xl"><Typography>Loading content...</Typography></Loader>', '<Loader name="circle" variant="absolute" styles={{top: "50%", left: "50%", transform: "translate(-50%, -50%)"}} />', '<Loader name="dots" size="lg" className="custom-loader" WrapperView="div" />']
|
|
49
|
-
}, o = ['Use Loader name="dots" inline with text; use circle for standalone loading states.', 'Wrap Loader with variant="absolute" to overlay content during async actions.', "Set withWrapper={false} when you control layout externally.", 'Pair Loader with Typography to provide context (e.g., "Loading...").', 'Use Loader name="circle" for general loading states and name="dots" for inline text loading indicators.', 'Apply Loader size="sm" or "xs" for inline loading in buttons or small UI elements.', 'Set Loader size="lg" or "xl" for full-page or section loading states for better visibility.', 'Use Loader variant="inline" (default) for loading indicators within text or inline elements.', 'Apply Loader variant="block" to center loader in its container with block-level display.', 'Set Loader variant="flex" when using within FlexContainer for proper flex item behavior.', 'Use Loader variant="absolute" with position styles for overlay loading on specific areas.', 'Apply Loader variant="fixed" for full-screen loading overlays with centered positioning.', "Set Loader withWrapper={false} when custom wrapper control is needed or to reduce DOM nesting.", 'Use Loader with children prop to add loading text like "Loading..." or "Please wait".', "Apply Loader size consistently across similar loading contexts for visual coherence.", "Combine Loader with conditional rendering to show/hide based on loading state.", 'Use Loader name="dots" for subtle loading indication in forms or inline content.', 'Apply Loader name="circle" for prominent loading states requiring clear user feedback.', 'Set Loader WrapperView="div" for block-level wrapper or "span" for inline wrapper.', "Use Loader with Card overlay for loading states within card components.", "Apply Loader styles for custom colors matching brand or theme requirements.", "Combine Loader with InlineNotification for loading messages with additional context.", 'Use Loader size="md" as default for most loading scenarios for balanced visibility.', "Apply Loader with semi-transparent overlay background for modal loading states.", 'Set Loader with aria-label or role="status" for accessibility with screen readers.', 'Use Loader in Button with size="xs" during form submission or action processing.', "Apply Loader with timeout fallback to show error message if loading takes too long.", "Combine Loader with progress percentage in children for determinate loading states.", 'Use Loader variant="absolute" in Table or List items for row-level loading states.', "Apply Loader with fade-in animation via className for smooth appearance.", "Set Loader with minimum display time to prevent flashing for quick operations.", 'Use Loader name="dots" with Typography for "Loading..." text animations.', "Apply Loader in ChatContainer for message loading or connection states.", "Combine Loader with skeleton screens for progressive content loading.", 'Use Loader size="xl" with dimmed background for critical operation loading.', "Apply Loader consistently in async data fetching patterns across the application.", "Set Loader with z-index styles when overlaying other content.", "Use Loader with debouncing to prevent showing for very quick operations.", 'Apply Loader name="circle" with custom animation speed via CSS variables.', "Combine Loader with error boundary for graceful handling of loading failures.", "Use Loader in Form with disabled inputs during submission processing.", 'Apply Loader variant="inline" in Select or Input for async option loading.', "Set Loader with accessible loading announcements for screen reader users.", "Use Loader with custom SVG animations via className for branded loading states.", "Apply Loader in Image components as placeholder while images load.", "Combine Loader with lazy loading patterns for on-demand content.", "Use Loader with request cancellation logic for interruptible operations.", "Apply Loader size based on container size for proportional loading indicators.", "Set Loader with keyboard focus management to prevent interaction during loading.", "Use Loader in modal dialogs to indicate processing of user actions.", "Apply Loader with consistent positioning strategy across similar UI patterns.", "Combine Loader with optimistic UI updates for better perceived performance.", "Use Loader sparingly to avoid loading state fatigue in users."], a = {
|
|
50
|
-
component: e,
|
|
51
|
-
compositionTips: o
|
|
52
|
-
};
|
|
53
|
-
export {
|
|
54
|
-
a as default
|
|
55
|
-
};
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
const o = {
|
|
2
|
-
name: "Modal",
|
|
3
|
-
import: "import { Modal } from 'gd-design-library'",
|
|
4
|
-
description: "Overlay dialog component for displaying content in a layer above the main application, with built-in backdrop, close controls, and accessibility features for focused user interactions.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "isOpen",
|
|
7
|
-
type: "boolean",
|
|
8
|
-
description: "Controls the visibility state of the modal dialog",
|
|
9
|
-
required: !0,
|
|
10
|
-
default: !1
|
|
11
|
-
}, {
|
|
12
|
-
name: "onClose",
|
|
13
|
-
type: "() => void",
|
|
14
|
-
description: "Callback function triggered when the modal is closed via close button, backdrop click, or escape key",
|
|
15
|
-
required: !0
|
|
16
|
-
}, {
|
|
17
|
-
name: "showCloseButton",
|
|
18
|
-
type: "boolean",
|
|
19
|
-
description: "Shows or hides the close button in the modal header",
|
|
20
|
-
default: !0
|
|
21
|
-
}, {
|
|
22
|
-
name: "closeOnEscape",
|
|
23
|
-
type: "boolean",
|
|
24
|
-
description: "Enables closing the modal by pressing the Escape key",
|
|
25
|
-
default: !0
|
|
26
|
-
}, {
|
|
27
|
-
name: "title",
|
|
28
|
-
type: "ReactNode",
|
|
29
|
-
description: "Content to display in the modal header, typically a title string or Typography component"
|
|
30
|
-
}, {
|
|
31
|
-
name: "children",
|
|
32
|
-
type: "ReactNode",
|
|
33
|
-
description: "Main content to be displayed in the modal body"
|
|
34
|
-
}, {
|
|
35
|
-
name: "footer",
|
|
36
|
-
type: "ReactNode",
|
|
37
|
-
description: "Footer content, typically action buttons for confirm/cancel operations"
|
|
38
|
-
}, {
|
|
39
|
-
name: "styles",
|
|
40
|
-
type: "CSSProperties",
|
|
41
|
-
description: "Custom styles to apply to the modal container",
|
|
42
|
-
default: {}
|
|
43
|
-
}],
|
|
44
|
-
examples: ['<Modal isOpen={isOpen} onClose={handleClose} title="Confirm Action" footer={<Button onClick={handleConfirm}>Confirm</Button>}>Are you sure you want to proceed?</Modal>', "<Modal isOpen={showModal} onClose={() => setShowModal(false)} showCloseButton={false} closeOnEscape={false}><Form onSubmit={handleSubmit}>{formFields}</Form></Modal>", '<Modal isOpen={dialogOpen} onClose={closeDialog} title={<Typography variant="h3">Settings</Typography>} styles={{maxWidth: "600px"}}>{settingsContent}</Modal>', '<Modal isOpen={alertOpen} onClose={handleAlertClose} footer={<FlexContainer gap="8px" justifyContent="flex-end"><Button variant="text" onClick={handleCancel}>Cancel</Button><Button variant="contained" onClick={handleOk}>OK</Button></FlexContainer>}>{alertMessage}</Modal>']
|
|
45
|
-
}, e = ["Open Modal only when necessary to focus user attention on an action or message.", "Provide a clear onClose handler and ensure Escape/backdrop click behaviors match expectations.", "Keep content concise; move lengthy content into scrollable sections within the Modal.", "Use title and footer actions for clear context and decision points.", "Use Modal isOpen with state management (useState) to control modal visibility programmatically.", "Apply Modal onClose callback to update state and perform cleanup when modal is dismissed.", "Set Modal title with Typography component for consistent heading styles across all modals.", "Use Modal footer with FlexContainer to organize action buttons with proper spacing and alignment.", "Apply Modal showCloseButton={false} for critical actions that require explicit user choice.", "Set Modal closeOnEscape={false} when modal contains forms to prevent accidental data loss.", "Use Modal with Form component in children for structured data collection in overlay context.", 'Apply Modal styles={{maxWidth: "500px"}} to control modal width for optimal content display.', "Combine Modal with InlineNotification in children for validation messages or alerts.", "Use Modal footer with primary and secondary Button variants for clear action hierarchy.", "Set Modal with loading state in footer buttons during async operations.", "Apply Modal with Card component in children for visually grouped content sections.", "Use Modal title as string for simple headers or ReactNode for complex header layouts.", "Apply Modal with overflow scrolling in children for long content that exceeds viewport.", "Set Modal with stepped content using state to create multi-step wizards or processes.", "Use Modal onClose to trigger confirmation dialog for unsaved changes before closing.", "Apply Modal with keyboard focus management to trap focus within modal when open.", "Combine Modal with backdrop click handling via onClose for intuitive dismissal.", "Use Modal footer with Button fullWidth on mobile for better touch targets.", "Set Modal with animation classes in styles for smooth open/close transitions.", "Apply Modal with z-index management to ensure proper stacking above other content.", "Use Modal for confirmation dialogs with clear title and action buttons in footer.", "Apply Modal with responsive styles adapting to mobile viewport constraints.", "Set Modal with aria-label and role attributes for accessibility compliance.", "Use Modal children with Column or FlexContainer for organized content layout.", "Apply Modal with consistent padding in children for comfortable content spacing.", "Combine Modal with Select or Input components for filter or search interfaces.", "Use Modal isOpen with useEffect for side effects when modal opens or closes.", "Apply Modal with portal rendering to escape parent container constraints.", "Set Modal with prevent scroll on body when open to avoid background scrolling.", "Use Modal footer with disabled buttons based on form validation state.", "Apply Modal with custom close icon using showCloseButton and custom header.", "Combine Modal with ChatContainer for overlay chat widgets or help systems.", "Use Modal styles for custom positioning like slide-in from sides or bottom.", "Apply Modal with nested modals carefully, managing z-index and focus properly.", "Set Modal with data attributes for analytics tracking of modal interactions.", "Use Modal onClose with router navigation for modal routes in SPAs.", "Apply Modal with consistent sizing across similar modal types for UX coherence.", "Combine Modal with Image gallery for lightbox-style image viewing.", "Use Modal with video players ensuring proper cleanup on close.", "Apply Modal with print styles for printable modal content like receipts.", "Set Modal with autofocus on first interactive element for keyboard accessibility.", "Use Modal footer with tertiary actions using Link component for less prominent options.", "Apply Modal with error boundaries to handle and display errors gracefully.", "Combine Modal with real-time updates using websockets for live content.", "Use Modal with minimize/maximize controls for complex workspace interfaces.", "Apply Modal with drag handle for repositionable modal windows.", "Set Modal with size variants (small, medium, large) using consistent styles.", "Use Modal isOpen={false} by default to prevent flash of modal on initial render."], t = {
|
|
46
|
-
component: o,
|
|
47
|
-
compositionTips: e
|
|
48
|
-
};
|
|
49
|
-
export {
|
|
50
|
-
t as default
|
|
51
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
const e = {
|
|
2
|
-
name: "Portal",
|
|
3
|
-
import: "import { Portal } from 'gd-design-library'",
|
|
4
|
-
description: "Utility component that renders its children into a different part of the DOM tree, useful for modals, tooltips, and overlays that need to escape parent container constraints while maintaining React component hierarchy.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "lockScroll",
|
|
7
|
-
type: "boolean",
|
|
8
|
-
description: "Whether to prevent scrolling of the underlying content when portal is open",
|
|
9
|
-
default: !1
|
|
10
|
-
}, {
|
|
11
|
-
name: "container",
|
|
12
|
-
type: "HTMLElement | null",
|
|
13
|
-
description: "The DOM element where the portal content will be rendered",
|
|
14
|
-
default: "document.body"
|
|
15
|
-
}, {
|
|
16
|
-
name: "withWrapper",
|
|
17
|
-
type: "boolean",
|
|
18
|
-
description: "Whether to wrap the portal content in a container element",
|
|
19
|
-
default: !1
|
|
20
|
-
}, {
|
|
21
|
-
name: "wrapperVariant",
|
|
22
|
-
type: "WrapperVariant",
|
|
23
|
-
description: "The style variant for the wrapper container",
|
|
24
|
-
default: "WrapperVariant.FullPage",
|
|
25
|
-
enum: ["inline", "block", "flex", "absolute", "fixed", "fullPage"]
|
|
26
|
-
}, {
|
|
27
|
-
name: "WrapperView",
|
|
28
|
-
type: "keyof HTMLElementTagNameMap | ElementType",
|
|
29
|
-
description: "The HTML element or React component to use as the wrapper",
|
|
30
|
-
default: "div"
|
|
31
|
-
}, {
|
|
32
|
-
name: "children",
|
|
33
|
-
type: "ReactNode",
|
|
34
|
-
description: "The content to be rendered inside the portal",
|
|
35
|
-
required: !0
|
|
36
|
-
}, {
|
|
37
|
-
name: "styles",
|
|
38
|
-
type: "CSSProperties",
|
|
39
|
-
description: "Custom styles to be applied to the portal container",
|
|
40
|
-
default: {}
|
|
41
|
-
}],
|
|
42
|
-
examples: ["<Portal lockScroll={true}><Modal isOpen={true} onClose={handleClose}>{modalContent}</Modal></Portal>", '<Portal container={tooltipContainer} withWrapper={true} wrapperVariant="absolute"><Tooltip>{tooltipText}</Tooltip></Portal>', '<Portal withWrapper={true} wrapperVariant="fixed" styles={{zIndex: 9999}}><NotificationToast /></Portal>', '<Portal lockScroll={false} container={document.getElementById("sidebar")}><NavigationMenu /></Portal>']
|
|
43
|
-
}, t = ["Use Portal to render overlays above complex layout stacking contexts.", "Enable lockScroll to prevent background scrolling when overlays are open.", "Choose wrapperVariant based on positioning needs: absolute, fixed, or fullPage.", "Set a specific container to scope the overlay to a subsection of the app.", "Use Portal for rendering content outside the normal DOM hierarchy to escape overflow hidden or z-index constraints.", "Apply Portal lockScroll={true} when displaying modals or overlays to prevent background scrolling.", "Set Portal container to specific DOM element for targeted rendering instead of document.body.", "Use Portal withWrapper={true} to add a wrapper element around portal content for styling control.", 'Apply Portal wrapperVariant="fixed" for full-screen overlays and "absolute" for positioned tooltips.', "Combine Portal with Modal for proper modal rendering that escapes parent constraints.", 'Use Portal WrapperView="div" for block-level portals or custom components for specialized wrappers.', "Apply Portal styles for positioning and z-index management of overlay content.", "Set Portal lockScroll={false} for non-blocking overlays like tooltips or popovers.", "Use Portal with conditional rendering to mount/unmount portal content based on state.", 'Apply Portal container={document.getElementById("id")} for rendering in specific page sections.', "Combine Portal with multiple children for complex overlay compositions.", 'Use Portal wrapperVariant="fullPage" for full-screen takeover interfaces.', "Apply Portal with event handlers to manage focus and keyboard interactions.", "Set Portal withWrapper={false} when children already have appropriate wrapper elements.", "Use Portal for dropdown menus that need to escape overflow hidden containers.", "Apply Portal with high z-index values in styles for proper stacking context.", "Combine Portal with animation libraries for smooth entry/exit transitions.", "Use Portal for toast notifications that float above all content.", "Apply Portal with click-outside detection for dismissible overlays.", "Set Portal container dynamically based on responsive breakpoints or user preferences.", "Use Portal for context menus that appear at cursor position.", "Apply Portal with position calculations for smart tooltip positioning.", "Combine Portal with focus trap for accessible modal experiences.", 'Use Portal wrapperVariant="inline" for inline overlays within text content.', "Apply Portal with cleanup effects to prevent memory leaks on unmount.", "Set Portal container to null to conditionally disable portal behavior.", "Use Portal for floating action buttons that need consistent positioning.", "Apply Portal with resize observers for responsive overlay positioning.", "Combine Portal with backdrop components for modal-like overlays.", "Use Portal for autocomplete dropdowns that need to escape container bounds.", "Apply Portal styles with CSS variables for theme-aware overlay styling.", "Set Portal with aria-live regions for accessible notifications.", "Use Portal for tour highlights that overlay specific page elements.", "Apply Portal with scroll lock utilities for better iOS support.", "Combine Portal with transition groups for multiple overlay animations.", "Use Portal for video players that can go fullscreen or picture-in-picture.", "Apply Portal with keyboard event handlers for escape key dismissal.", "Set Portal container based on feature flags for A/B testing overlays.", "Use Portal for date pickers that need to render above form fields.", "Apply Portal with intersection observers for viewport-aware positioning.", "Combine Portal with React.createPortal for custom portal implementations.", "Use Portal for sidebar drawers that slide over main content.", "Apply Portal with touch event handlers for mobile-friendly overlays.", "Set Portal withWrapper for consistent overlay container structure.", "Use Portal for color pickers that float above input fields.", "Apply Portal with requestAnimationFrame for smooth position updates.", "Combine Portal with CSS Grid for complex overlay layouts.", "Use Portal for rich text editor toolbars that float above content.", "Apply Portal with MutationObserver for dynamic content updates."], o = {
|
|
44
|
-
component: e,
|
|
45
|
-
compositionTips: t
|
|
46
|
-
};
|
|
47
|
-
export {
|
|
48
|
-
o as default
|
|
49
|
-
};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
const i = {
|
|
2
|
-
name: "Price",
|
|
3
|
-
import: "import { Price } from 'gd-design-library'",
|
|
4
|
-
description: "Price display component for showing product prices with support for current and discounted pricing, currency formatting, and customizable styling for e-commerce applications.",
|
|
5
|
-
props: [{
|
|
6
|
-
name: "currentValue",
|
|
7
|
-
type: "string",
|
|
8
|
-
description: "Current price value to be displayed"
|
|
9
|
-
}, {
|
|
10
|
-
name: "oldValue",
|
|
11
|
-
type: "string",
|
|
12
|
-
description: "Optional old price value to show discounted prices"
|
|
13
|
-
}, {
|
|
14
|
-
name: "className",
|
|
15
|
-
type: "string",
|
|
16
|
-
description: "Additional CSS classes for custom styling"
|
|
17
|
-
}],
|
|
18
|
-
examples: ['<Price currentValue="$29.99" />', '<Price currentValue="$19.99" oldValue="$39.99" />', '<Price currentValue="€50.00" oldValue="€75.00" className="sale-price" />', '<Price currentValue="$0.99" />']
|
|
19
|
-
}, e = ["Show oldValue with strikethrough styling to indicate discounts.", "Localize and format currency consistently across the app.", "Pair Price with Counter to show dynamic totals in carts.", "Use semantic markup (e.g., aria-label) to announce discounts for screen readers.", "Use Price with currentValue for regular product pricing display in product cards and listings.", "Apply Price with both currentValue and oldValue to show discounts and sale prices effectively.", "Set Price oldValue with strikethrough styling via CSS to clearly indicate original pricing.", "Use Price currentValue with bold or larger font via className for emphasis on final price.", "Apply Price in Card components alongside product images and descriptions for e-commerce layouts.", 'Combine Price with Typography for currency symbols or additional pricing context like "per month".', "Use Price className to apply consistent pricing styles across all product displays.", "Apply Price with InlineNotification to highlight special offers or limited-time discounts.", "Set Price currentValue dynamically based on user selection of product variants or quantities.", "Use Price with conditional rendering to show member vs non-member pricing.", "Apply Price oldValue only when discount is active to avoid confusion with regular pricing.", 'Combine Price with Badge components to show discount percentages like "30% OFF".', "Use Price in product comparison tables with consistent alignment for easy price comparison.", "Apply Price with responsive font sizes via className for mobile-optimized displays.", "Set Price with locale-specific currency formatting for international e-commerce sites.", "Use Price alongside Counter component for quantity-based pricing calculations.", "Apply Price with animation effects when prices update due to promotions or cart changes.", "Combine Price with Tooltip to explain pricing details like tax inclusion or shipping costs.", "Use Price currentValue with color coding (red for sale, green for deals) for visual pricing cues.", "Apply Price in ContentCarousel for featured products with prominent pricing display.", "Set Price with consistent decimal places for professional pricing presentation.", "Use Price with subscription indicators showing recurring payment terms.", "Apply Price oldValue with smaller font size via className to de-emphasize original price.", "Combine Price with Icon components for price drop indicators or trending pricing.", "Use Price in checkout flows showing item prices, subtotals, and totals consistently.", "Apply Price with strikethrough animation when discounts are applied in real-time.", "Set Price className with theme-aware colors for dark/light mode compatibility.", "Use Price with price range display for variable pricing products using two Price components.", "Apply Price in Select option rendering for tier-based pricing selection.", "Combine Price with Timer components for countdown sales showing time-limited pricing.", 'Use Price currentValue with "FREE" text for zero-cost items or promotional giveaways.', "Apply Price with shipping cost indicators integrated into total price display.", "Set Price with consistent spacing from product titles and descriptions for visual hierarchy.", "Use Price in order history showing historical pricing at time of purchase.", "Apply Price with currency conversion tooltips for international customers.", "Combine Price with installment payment options showing monthly payment amounts.", "Use Price oldValue to show MSRP (Manufacturer's Suggested Retail Price) vs actual price.", "Apply Price with bulk pricing tiers showing different prices for quantity breaks.", "Set Price with accessibility attributes ensuring screen readers announce prices correctly.", "Use Price in email templates for order confirmations and promotional campaigns.", "Apply Price with dynamic updates based on promo code application in cart.", "Combine Price with stock availability indicators for pricing based on inventory.", 'Use Price currentValue with unit pricing display like "per kg" or "per item".', "Apply Price with consistent formatting for thousands separators and decimal points.", "Set Price className for sale items with special background or border highlighting.", "Use Price in wishlist displays showing current vs saved pricing for price tracking.", "Apply Price with price match guarantee badges or lowest price indicators.", "Combine Price with reviews/ratings for value perception in product displays.", "Use Price with clear visual hierarchy making current price most prominent."], r = {
|
|
20
|
-
component: i,
|
|
21
|
-
compositionTips: e
|
|
22
|
-
};
|
|
23
|
-
export {
|
|
24
|
-
r as default
|
|
25
|
-
};
|