@spark-ui/components 13.1.4 → 13.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button-B6rA3-e5.js +2 -0
- package/dist/Button-B6rA3-e5.js.map +1 -0
- package/dist/{chunk-2YM6GKWW.mjs → Button-C3C0aixy.mjs} +130 -173
- package/dist/Button-C3C0aixy.mjs.map +1 -0
- package/dist/DialogContent.styles-B5pR8ECK.js +2 -0
- package/dist/DialogContent.styles-B5pR8ECK.js.map +1 -0
- package/dist/{chunk-XZ47F6TP.mjs → DialogContent.styles-_lRDsl8c.mjs} +6 -8
- package/dist/DialogContent.styles-_lRDsl8c.mjs.map +1 -0
- package/dist/Icon-CF0W0LKr.js +2 -0
- package/dist/Icon-CF0W0LKr.js.map +1 -0
- package/dist/Icon-Ck-dhfLd.mjs +58 -0
- package/dist/Icon-Ck-dhfLd.mjs.map +1 -0
- package/dist/IconButton-C62-axzv.mjs +43 -0
- package/dist/IconButton-C62-axzv.mjs.map +1 -0
- package/dist/IconButton-D3g86WpZ.js +2 -0
- package/dist/IconButton-D3g86WpZ.js.map +1 -0
- package/dist/Slot-D2Bbf8Gw.mjs +14 -0
- package/dist/Slot-D2Bbf8Gw.mjs.map +1 -0
- package/dist/Slot-DQ8z2zsy.js +2 -0
- package/dist/Slot-DQ8z2zsy.js.map +1 -0
- package/dist/Spinner-_Kffli3B.js +2 -0
- package/dist/Spinner-_Kffli3B.js.map +1 -0
- package/dist/{chunk-GAK4SC2F.mjs → Spinner-jF3-zoh_.mjs} +29 -40
- package/dist/Spinner-jF3-zoh_.mjs.map +1 -0
- package/dist/{chunk-RKPP7ZOK.mjs → TextLink-BuzFRWO6.mjs} +27 -36
- package/dist/TextLink-BuzFRWO6.mjs.map +1 -0
- package/dist/TextLink-C3xDLsbC.js +2 -0
- package/dist/TextLink-C3xDLsbC.js.map +1 -0
- package/dist/VisuallyHidden-CB6Nx76j.js +2 -0
- package/dist/VisuallyHidden-CB6Nx76j.js.map +1 -0
- package/dist/VisuallyHidden-KH1biLx-.mjs +28 -0
- package/dist/VisuallyHidden-KH1biLx-.mjs.map +1 -0
- package/dist/accordion/Accordion.d.ts +27 -0
- package/dist/accordion/AccordionItem.d.ts +12 -0
- package/dist/accordion/AccordionItemContent.d.ts +12 -0
- package/dist/accordion/AccordionItemHeader.d.ts +9 -0
- package/dist/accordion/AccordionItemTrigger.d.ts +12 -0
- package/dist/accordion/index.d.mts +10 -68
- package/dist/accordion/index.d.ts +10 -68
- package/dist/accordion/index.js +2 -325
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +114 -154
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/accordion/useRenderSlot.d.ts +3 -0
- package/dist/alert-dialog/AlertDialog.d.ts +29 -0
- package/dist/alert-dialog/AlertDialogAction.d.ts +13 -0
- package/dist/alert-dialog/AlertDialogBody.d.ts +12 -0
- package/dist/alert-dialog/AlertDialogCancel.d.ts +13 -0
- package/dist/alert-dialog/AlertDialogContent.d.ts +9 -0
- package/dist/alert-dialog/AlertDialogContext.d.ts +12 -0
- package/dist/alert-dialog/AlertDialogDescription.d.ts +9 -0
- package/dist/alert-dialog/AlertDialogFooter.d.ts +10 -0
- package/dist/alert-dialog/AlertDialogHeader.d.ts +10 -0
- package/dist/alert-dialog/AlertDialogOverlay.d.ts +9 -0
- package/dist/alert-dialog/AlertDialogPortal.d.ts +7 -0
- package/dist/alert-dialog/AlertDialogTitle.d.ts +9 -0
- package/dist/alert-dialog/AlertDialogTrigger.d.ts +13 -0
- package/dist/alert-dialog/index.d.mts +26 -147
- package/dist/alert-dialog/index.d.ts +26 -147
- package/dist/alert-dialog/index.js +2 -405
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +172 -260
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/alert-dialog/useRenderSlot.d.ts +3 -0
- package/dist/avatar/Avatar.d.ts +3 -0
- package/dist/avatar/AvatarAction.d.ts +9 -0
- package/dist/avatar/AvatarImage.d.ts +7 -0
- package/dist/avatar/AvatarOnlineBadge.d.ts +9 -0
- package/dist/avatar/AvatarPlaceholder.d.ts +8 -0
- package/dist/avatar/AvatarUser.d.ts +7 -0
- package/dist/avatar/context.d.ts +5 -0
- package/dist/avatar/index.d.mts +8 -59
- package/dist/avatar/index.d.ts +8 -59
- package/dist/avatar/index.js +2 -1323
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +149 -207
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/avatar/types.d.ts +24 -0
- package/dist/badge/Badge.d.ts +9 -0
- package/dist/badge/BadgeItem.d.ts +31 -0
- package/dist/badge/BadgeItem.styles.d.ts +7 -0
- package/dist/badge/index.d.mts +1 -47
- package/dist/badge/index.d.ts +1 -47
- package/dist/badge/index.js +2 -122
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +32 -44
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/Breadcrumb.d.ts +10 -0
- package/dist/breadcrumb/Breadcrumb.styles.d.ts +0 -0
- package/dist/breadcrumb/BreadcrumbCurrentPage.d.ts +11 -0
- package/dist/breadcrumb/BreadcrumbItem.d.ts +9 -0
- package/dist/breadcrumb/BreadcrumbLink.d.ts +12 -0
- package/dist/breadcrumb/BreadcrumbSeparator.d.ts +10 -0
- package/dist/breadcrumb/index.d.mts +7 -59
- package/dist/breadcrumb/index.d.ts +7 -59
- package/dist/breadcrumb/index.js +2 -327
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +106 -146
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/Button.d.ts +26 -0
- package/dist/button/Button.styles.d.ts +10 -0
- package/dist/button/index.d.mts +1 -41
- package/dist/button/index.d.ts +1 -41
- package/dist/button/index.js +2 -935
- package/dist/button/index.js.map +1 -1
- package/dist/button/index.mjs +3 -8
- package/dist/button/index.mjs.map +1 -1
- package/dist/button/variants/contrast.d.ts +45 -0
- package/dist/button/variants/filled.d.ts +45 -0
- package/dist/button/variants/ghost.d.ts +45 -0
- package/dist/button/variants/index.d.mts +5 -0
- package/dist/button/variants/index.d.ts +5 -0
- package/dist/button/variants/outlined.d.ts +45 -0
- package/dist/button/variants/tinted.d.ts +45 -0
- package/dist/card/Backdrop.d.ts +14 -0
- package/dist/card/Card.d.ts +16 -0
- package/dist/card/Card.styles.d.ts +7 -0
- package/dist/card/Content.d.ts +15 -0
- package/dist/card/Content.styles.d.ts +8 -0
- package/dist/card/context.d.ts +11 -0
- package/dist/card/index.d.mts +5 -58
- package/dist/card/index.d.ts +5 -58
- package/dist/card/index.js +2 -502
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +125 -178
- package/dist/card/index.mjs.map +1 -1
- package/dist/card/utils.d.ts +3 -0
- package/dist/carousel/Carousel.d.ts +12 -0
- package/dist/carousel/CarouselControls.d.ts +9 -0
- package/dist/carousel/CarouselNextButton.d.ts +5 -0
- package/dist/carousel/CarouselPageIndicator.d.ts +14 -0
- package/dist/carousel/CarouselPagePicker.d.ts +14 -0
- package/dist/carousel/CarouselPrevButton.d.ts +5 -0
- package/dist/carousel/CarouselSlide.d.ts +12 -0
- package/dist/carousel/CarouselSlides.d.ts +10 -0
- package/dist/carousel/CarouselViewport.d.ts +9 -0
- package/dist/carousel/index.d.mts +18 -263
- package/dist/carousel/index.d.ts +18 -263
- package/dist/carousel/index.js +2 -1882
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +428 -650
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/carousel/types.d.ts +165 -0
- package/dist/carousel/useCarousel.d.ts +2 -0
- package/dist/carousel/useCarouselVisibility.d.ts +13 -0
- package/dist/carousel/useEvent.d.ts +7 -0
- package/dist/carousel/useIsMounted.d.ts +1 -0
- package/dist/carousel/useIsVisible.d.ts +6 -0
- package/dist/carousel/useResizeObserver.d.ts +2 -0
- package/dist/carousel/useScrollEnd.d.ts +3 -0
- package/dist/carousel/useSnapPoints.d.ts +10 -0
- package/dist/carousel/utils.d.ts +24 -0
- package/dist/checkbox/Checkbox.d.ts +10 -0
- package/dist/checkbox/CheckboxGroup.d.ts +18 -0
- package/dist/checkbox/CheckboxGroup.styles.d.ts +5 -0
- package/dist/checkbox/CheckboxGroupContext.d.ts +41 -0
- package/dist/checkbox/CheckboxIndicator.d.ts +9 -0
- package/dist/checkbox/CheckboxInput.d.ts +47 -0
- package/dist/checkbox/CheckboxInput.styles.d.ts +5 -0
- package/dist/checkbox/CheckboxLabel.d.ts +12 -0
- package/dist/checkbox/CheckboxLabel.styles.d.ts +5 -0
- package/dist/checkbox/index.d.mts +2 -120
- package/dist/checkbox/index.d.ts +2 -120
- package/dist/checkbox/index.js +2 -511
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +135 -226
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/Chip.d.ts +34 -0
- package/dist/chip/Chip.styles.d.ts +8 -0
- package/dist/chip/ChipClearButton.d.ts +10 -0
- package/dist/chip/ChipClearButton.styles.d.ts +10 -0
- package/dist/chip/ChipContent.d.ts +8 -0
- package/dist/chip/ChipIcon.d.ts +8 -0
- package/dist/chip/ChipLeadingIcon.d.ts +9 -0
- package/dist/chip/ChipTrailingIcon.d.ts +9 -0
- package/dist/chip/index.d.mts +10 -92
- package/dist/chip/index.d.ts +10 -92
- package/dist/chip/index.js +2 -908
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +218 -324
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chip/useChipContext.d.ts +4 -0
- package/dist/chip/useChipElement.d.ts +41 -0
- package/dist/chip/variants/dashed.d.ts +49 -0
- package/dist/chip/variants/index.d.mts +3 -0
- package/dist/chip/variants/index.d.ts +3 -0
- package/dist/chip/variants/outlined.d.ts +49 -0
- package/dist/chip/variants/tinted.d.ts +49 -0
- package/dist/collapsible/Content.d.ts +12 -0
- package/dist/collapsible/Root.d.ts +12 -0
- package/dist/collapsible/Trigger.d.ts +11 -0
- package/dist/collapsible/index.d.mts +4 -40
- package/dist/collapsible/index.d.ts +4 -40
- package/dist/collapsible/index.js +2 -109
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +39 -58
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/collapsible/useRenderSlot.d.ts +3 -0
- package/dist/combobox/Combobox.d.ts +6 -0
- package/dist/combobox/ComboboxClearButton.d.ts +9 -0
- package/dist/combobox/ComboboxContext.d.ts +108 -0
- package/dist/combobox/ComboboxDisclosure.d.ts +13 -0
- package/dist/combobox/ComboboxEmpty.d.ts +11 -0
- package/dist/combobox/ComboboxGroup.d.ts +11 -0
- package/dist/combobox/ComboboxInput.d.ts +15 -0
- package/dist/combobox/ComboboxItem.d.ts +12 -0
- package/dist/combobox/ComboboxItemContext.d.ts +17 -0
- package/dist/combobox/ComboboxItemIndicator.d.ts +11 -0
- package/dist/combobox/ComboboxItemText.d.ts +10 -0
- package/dist/combobox/ComboboxItems.d.ts +11 -0
- package/dist/combobox/ComboboxItemsGroupContext.d.ts +8 -0
- package/dist/combobox/ComboboxLabel.d.ts +11 -0
- package/dist/combobox/ComboboxLeadingIcon.d.ts +7 -0
- package/dist/combobox/ComboboxPopover.d.ts +10 -0
- package/dist/combobox/ComboboxPortal.d.ts +2 -0
- package/dist/combobox/ComboboxSelectedItems.d.ts +4 -0
- package/dist/combobox/ComboboxTrigger.d.ts +11 -0
- package/dist/combobox/ComboboxTrigger.styles.d.ts +6 -0
- package/dist/combobox/index.d.mts +19 -271
- package/dist/combobox/index.d.ts +19 -271
- package/dist/combobox/index.js +2 -2588
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +623 -1017
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/combobox/tests/test-utils.d.ts +8 -0
- package/dist/combobox/types.d.ts +8 -0
- package/dist/combobox/useCombobox/multipleSelectionReducer.d.ts +13 -0
- package/dist/combobox/useCombobox/singleSelectionReducer.d.ts +8 -0
- package/dist/combobox/utils/index.d.mts +14 -0
- package/dist/combobox/utils/index.d.ts +14 -0
- package/dist/combobox/utils/useWidthIncreaseCallback.d.ts +2 -0
- package/dist/dialog/Dialog.d.ts +32 -0
- package/dist/dialog/DialogBody.d.ts +12 -0
- package/dist/dialog/DialogClose.d.ts +9 -0
- package/dist/dialog/DialogCloseButton.d.ts +9 -0
- package/dist/dialog/DialogContent.d.ts +14 -0
- package/dist/dialog/DialogContent.styles.d.ts +6 -0
- package/dist/dialog/DialogContext.d.ts +11 -0
- package/dist/dialog/DialogDescription.d.ts +9 -0
- package/dist/dialog/DialogFooter.d.ts +10 -0
- package/dist/dialog/DialogHeader.d.ts +10 -0
- package/dist/dialog/DialogOverlay.d.ts +9 -0
- package/dist/dialog/DialogPortal.d.ts +7 -0
- package/dist/dialog/DialogTitle.d.ts +9 -0
- package/dist/dialog/DialogTrigger.d.ts +17 -0
- package/dist/dialog/index.d.mts +25 -154
- package/dist/dialog/index.d.ts +25 -154
- package/dist/dialog/index.js +2 -1389
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +163 -258
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/Divider.d.ts +30 -0
- package/dist/divider/Divider.styles.d.ts +9 -0
- package/dist/divider/DividerContent.d.ts +13 -0
- package/dist/divider/index.d.mts +4 -59
- package/dist/divider/index.d.ts +4 -59
- package/dist/divider/index.js +2 -224
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs +79 -100
- package/dist/divider/index.mjs.map +1 -1
- package/dist/divider/variants/intents.d.ts +17 -0
- package/dist/drawer/Drawer.d.ts +39 -0
- package/dist/drawer/DrawerBody.d.ts +11 -0
- package/dist/drawer/DrawerBody.styles.d.ts +5 -0
- package/dist/drawer/DrawerClose.d.ts +9 -0
- package/dist/drawer/DrawerCloseButton.d.ts +7 -0
- package/dist/drawer/DrawerContent.d.ts +10 -0
- package/dist/drawer/DrawerContent.styles.d.ts +6 -0
- package/dist/drawer/DrawerContext.d.ts +9 -0
- package/dist/drawer/DrawerDescription.d.ts +9 -0
- package/dist/drawer/DrawerFooter.d.ts +8 -0
- package/dist/drawer/DrawerHeader.d.ts +10 -0
- package/dist/drawer/DrawerOverlay.d.ts +9 -0
- package/dist/drawer/DrawerPortal.d.ts +7 -0
- package/dist/drawer/DrawerTitle.d.ts +9 -0
- package/dist/drawer/DrawerTrigger.d.ts +13 -0
- package/dist/drawer/index.d.mts +24 -141
- package/dist/drawer/index.d.ts +24 -141
- package/dist/drawer/index.js +2 -1400
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +141 -230
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/Dropdown.d.ts +6 -0
- package/dist/dropdown/DropdownContext.d.ts +81 -0
- package/dist/dropdown/DropdownDivider.d.ts +10 -0
- package/dist/dropdown/DropdownGroup.d.ts +11 -0
- package/dist/dropdown/DropdownItem.d.ts +12 -0
- package/dist/dropdown/DropdownItemContext.d.ts +17 -0
- package/dist/dropdown/DropdownItemIndicator.d.ts +11 -0
- package/dist/dropdown/DropdownItemText.d.ts +9 -0
- package/dist/dropdown/DropdownItems.d.ts +21 -0
- package/dist/dropdown/DropdownItemsGroupContext.d.ts +8 -0
- package/dist/dropdown/DropdownLabel.d.ts +11 -0
- package/dist/dropdown/DropdownLeadingIcon.d.ts +7 -0
- package/dist/dropdown/DropdownPopover.d.ts +6 -0
- package/dist/dropdown/DropdownPortal.d.ts +2 -0
- package/dist/dropdown/DropdownTrigger.d.ts +12 -0
- package/dist/dropdown/DropdownTrigger.styles.d.ts +5 -0
- package/dist/dropdown/DropdownValue.d.ts +11 -0
- package/dist/dropdown/index.d.mts +16 -220
- package/dist/dropdown/index.d.ts +16 -220
- package/dist/dropdown/index.js +2 -2051
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +352 -584
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/dropdown/types.d.ts +8 -0
- package/dist/dropdown/useDropdown.d.ts +41 -0
- package/dist/dropdown/utils.d.ts +13 -0
- package/dist/file-upload/FileUpload.d.ts +130 -0
- package/dist/file-upload/FileUploadAcceptedFile.d.ts +25 -0
- package/dist/file-upload/FileUploadContext.d.ts +17 -0
- package/dist/file-upload/FileUploadDropzone.d.ts +10 -0
- package/dist/file-upload/FileUploadItemDeleteTrigger.d.ts +11 -0
- package/dist/file-upload/FileUploadPreviewImage.d.ts +17 -0
- package/dist/file-upload/FileUploadRejectedFile.d.ts +24 -0
- package/dist/file-upload/FileUploadRejectedFileDeleteTrigger.d.ts +12 -0
- package/dist/file-upload/FileUploadTrigger.d.ts +12 -0
- package/dist/file-upload/constants.d.ts +29 -0
- package/dist/file-upload/index.d.mts +14 -262
- package/dist/file-upload/index.d.ts +14 -262
- package/dist/file-upload/index.js +2 -2255
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs +506 -834
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/file-upload/test-utils.d.ts +9 -0
- package/dist/file-upload/useFileUploadState.d.ts +88 -0
- package/dist/file-upload/utils.d.ts +40 -0
- package/dist/form-field/FormField.d.ts +21 -0
- package/dist/form-field/FormFieldAlertMessage.d.ts +9 -0
- package/dist/form-field/FormFieldCharactersCount.d.ts +26 -0
- package/dist/form-field/FormFieldContext.d.ts +49 -0
- package/dist/form-field/FormFieldControl.d.ts +12 -0
- package/dist/form-field/FormFieldErrorMessage.d.ts +9 -0
- package/dist/form-field/FormFieldHelperMessage.d.ts +9 -0
- package/dist/form-field/FormFieldLabel.d.ts +13 -0
- package/dist/form-field/FormFieldMessage.d.ts +8 -0
- package/dist/form-field/FormFieldProvider.d.ts +9 -0
- package/dist/form-field/FormFieldRequiredIndicator.d.ts +9 -0
- package/dist/form-field/FormFieldStateMessage.d.ts +10 -0
- package/dist/form-field/FormFieldSuccessMessage.d.ts +9 -0
- package/dist/form-field/index.d.mts +21 -176
- package/dist/form-field/index.d.ts +21 -176
- package/dist/form-field/index.js +2 -553
- package/dist/form-field/index.js.map +1 -1
- package/dist/form-field/index.mjs +246 -349
- package/dist/form-field/index.mjs.map +1 -1
- package/dist/icon/Icon.d.ts +17 -0
- package/dist/icon/Icon.styles.d.ts +6 -0
- package/dist/icon/index.d.mts +1 -28
- package/dist/icon/index.d.ts +1 -28
- package/dist/icon/index.js +2 -127
- package/dist/icon/index.js.map +1 -1
- package/dist/icon/index.mjs +3 -7
- package/dist/icon/index.mjs.map +1 -1
- package/dist/icon-button/IconButton.d.ts +10 -0
- package/dist/icon-button/IconButton.styles.d.ts +5 -0
- package/dist/icon-button/index.d.mts +1 -16
- package/dist/icon-button/index.d.ts +1 -16
- package/dist/icon-button/index.js +2 -980
- package/dist/icon-button/index.js.map +1 -1
- package/dist/icon-button/index.mjs +3 -9
- package/dist/icon-button/index.mjs.map +1 -1
- package/dist/input/Input.d.ts +14 -0
- package/dist/input/Input.styles.d.ts +11 -0
- package/dist/input/InputAddon.d.ts +9 -0
- package/dist/input/InputAddon.styles.d.ts +9 -0
- package/dist/input/InputClearButton.d.ts +12 -0
- package/dist/input/InputGroup.d.ts +17 -0
- package/dist/input/InputGroup.styles.d.ts +6 -0
- package/dist/input/InputGroupContext.d.ts +14 -0
- package/dist/input/InputIcon.d.ts +6 -0
- package/dist/input/InputLeadingAddon.d.ts +11 -0
- package/dist/input/InputLeadingIcon.d.ts +7 -0
- package/dist/input/InputTrailingAddon.d.ts +11 -0
- package/dist/input/InputTrailingIcon.d.ts +7 -0
- package/dist/input/index.d.mts +15 -72
- package/dist/input/index.d.ts +15 -72
- package/dist/input/index.js +2 -724
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +453 -12
- package/dist/input/index.mjs.map +1 -1
- package/dist/input-otp/InputOTP.d.ts +85 -0
- package/dist/input-otp/InputOTP.styles.d.ts +10 -0
- package/dist/input-otp/InputOTPContext.d.ts +16 -0
- package/dist/input-otp/InputOTPGroup.d.ts +7 -0
- package/dist/input-otp/InputOTPSeparator.d.ts +7 -0
- package/dist/input-otp/InputOTPSlot.d.ts +12 -0
- package/dist/input-otp/index.d.mts +10 -128
- package/dist/input-otp/index.d.ts +10 -128
- package/dist/input-otp/index.js +2 -668
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs +295 -462
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/input-otp/useInputOTP.d.ts +45 -0
- package/dist/kbd/Kbd.d.ts +5 -0
- package/dist/kbd/index.d.mts +1 -9
- package/dist/kbd/index.d.ts +1 -9
- package/dist/kbd/index.js +2 -47
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs +15 -18
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label/Label.d.ts +9 -0
- package/dist/label/LabelRequiredIndicator.d.ts +6 -0
- package/dist/label/index.d.mts +5 -9
- package/dist/label/index.d.ts +5 -9
- package/dist/label/index.js +2 -78
- package/dist/label/index.js.map +1 -1
- package/dist/label/index.mjs +38 -5
- package/dist/label/index.mjs.map +1 -1
- package/dist/link-box/LinkBox.d.ts +8 -0
- package/dist/link-box/LinkBoxLink.d.ts +8 -0
- package/dist/link-box/LinkBoxRaised.d.ts +9 -0
- package/dist/link-box/index.d.mts +6 -31
- package/dist/link-box/index.d.ts +6 -31
- package/dist/link-box/index.js +2 -92
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs +34 -56
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/pagination/Pagination.d.ts +8 -0
- package/dist/pagination/PaginationContext.d.ts +43 -0
- package/dist/pagination/PaginationEllipsis.d.ts +9 -0
- package/dist/pagination/PaginationFirstPageTrigger.d.ts +16 -0
- package/dist/pagination/PaginationItem.d.ts +17 -0
- package/dist/pagination/PaginationLastPageTrigger.d.ts +16 -0
- package/dist/pagination/PaginationNextTrigger.d.ts +16 -0
- package/dist/pagination/PaginationPages.d.ts +16 -0
- package/dist/pagination/PaginationPrevTrigger.d.ts +16 -0
- package/dist/pagination/index.d.mts +10 -135
- package/dist/pagination/index.d.ts +10 -135
- package/dist/pagination/index.js +2 -1353
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +176 -269
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/pagination/utils.d.ts +1 -0
- package/dist/popover/Popover.d.ts +9 -0
- package/dist/popover/PopoverAnchor.d.ts +9 -0
- package/dist/popover/PopoverArrow.d.ts +9 -0
- package/dist/popover/PopoverCloseButton.d.ts +10 -0
- package/dist/popover/PopoverContent.d.ts +10 -0
- package/dist/popover/PopoverContent.styles.d.ts +9 -0
- package/dist/popover/PopoverContext.d.ts +15 -0
- package/dist/popover/PopoverHeader.d.ts +10 -0
- package/dist/popover/PopoverPortal.d.ts +7 -0
- package/dist/popover/PopoverTrigger.d.ts +9 -0
- package/dist/popover/index.d.mts +17 -6
- package/dist/popover/index.d.ts +17 -6
- package/dist/popover/index.js +2 -1339
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +239 -11
- package/dist/popover/index.mjs.map +1 -1
- package/dist/portal/Portal.d.ts +10 -0
- package/dist/portal/index.d.mts +1 -13
- package/dist/portal/index.d.ts +1 -13
- package/dist/portal/index.js +2 -37
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs +5 -8
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress/Progress.d.ts +16 -0
- package/dist/progress/ProgressBar.d.ts +6 -0
- package/dist/progress/ProgressBar.styles.d.ts +5 -0
- package/dist/progress/ProgressContext.d.ts +13 -0
- package/dist/progress/ProgressIndicator.d.ts +6 -0
- package/dist/progress/ProgressIndicator.styles.d.ts +7 -0
- package/dist/progress/ProgressLabel.d.ts +6 -0
- package/dist/progress/index.d.mts +9 -48
- package/dist/progress/index.d.ts +9 -48
- package/dist/progress/index.js +2 -240
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +166 -5
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progress-tracker/ProgressTracker.d.ts +27 -0
- package/dist/progress-tracker/ProgressTracker.styles.d.ts +1 -0
- package/dist/progress-tracker/ProgressTrackerContext.d.ts +15 -0
- package/dist/progress-tracker/ProgressTrackerStep.d.ts +12 -0
- package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +10 -0
- package/dist/progress-tracker/ProgressTrackerStepIndicator.d.ts +15 -0
- package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +7 -0
- package/dist/progress-tracker/ProgressTrackerStepLabel.d.ts +9 -0
- package/dist/progress-tracker/index.d.mts +10 -80
- package/dist/progress-tracker/index.d.ts +10 -80
- package/dist/progress-tracker/index.js +2 -571
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +115 -183
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/Radio.d.ts +9 -0
- package/dist/radio-group/RadioGroup.d.ts +54 -0
- package/dist/radio-group/RadioGroup.styles.d.ts +5 -0
- package/dist/radio-group/RadioGroupContext.d.ts +5 -0
- package/dist/radio-group/RadioGroupProvider.d.ts +7 -0
- package/dist/radio-group/RadioIndicator.d.ts +18 -0
- package/dist/radio-group/RadioIndicator.styles.d.ts +5 -0
- package/dist/radio-group/RadioInput.d.ts +25 -0
- package/dist/radio-group/RadioInput.styles.d.ts +5 -0
- package/dist/radio-group/RadioLabel.d.ts +20 -0
- package/dist/radio-group/RadioLabel.styles.d.ts +5 -0
- package/dist/radio-group/index.d.mts +5 -98
- package/dist/radio-group/index.d.ts +5 -98
- package/dist/radio-group/index.js +2 -318
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +105 -174
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/Rating.d.ts +52 -0
- package/dist/rating/RatingStar.d.ts +10 -0
- package/dist/rating/RatingStar.styles.d.ts +14 -0
- package/dist/rating/index.d.mts +1 -78
- package/dist/rating/index.d.ts +1 -78
- package/dist/rating/index.js +2 -363
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs +125 -170
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating/types.d.ts +1 -0
- package/dist/rating/utils.d.ts +8 -0
- package/dist/scrolling-list/ScrollingList.d.ts +57 -0
- package/dist/scrolling-list/ScrollingListControls.d.ts +18 -0
- package/dist/scrolling-list/ScrollingListItem.d.ts +17 -0
- package/dist/scrolling-list/ScrollingListItems.d.ts +11 -0
- package/dist/scrolling-list/ScrollingListNextButton.d.ts +5 -0
- package/dist/scrolling-list/ScrollingListPrevButton.d.ts +5 -0
- package/dist/scrolling-list/ScrollingListSkipButton.d.ts +9 -0
- package/dist/scrolling-list/index.d.mts +14 -117
- package/dist/scrolling-list/index.d.ts +14 -117
- package/dist/scrolling-list/index.js +2 -1428
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs +193 -325
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/scrolling-list/useFocusWithinScroll.d.ts +3 -0
- package/dist/segmented-gauge/SegmentedGauge.d.ts +66 -0
- package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +14 -0
- package/dist/segmented-gauge/SegmentedGaugeLabel.d.ts +9 -0
- package/dist/segmented-gauge/SegmentedGaugeSegment.d.ts +12 -0
- package/dist/segmented-gauge/SegmentedGaugeTrack.d.ts +8 -0
- package/dist/segmented-gauge/index.d.mts +9 -101
- package/dist/segmented-gauge/index.d.ts +9 -101
- package/dist/segmented-gauge/index.js +2 -274
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs +132 -178
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/Select.d.ts +6 -0
- package/dist/select/SelectContext.d.ts +59 -0
- package/dist/select/SelectGroup.d.ts +11 -0
- package/dist/select/SelectItem.d.ts +11 -0
- package/dist/select/SelectItems.d.ts +10 -0
- package/dist/select/SelectItemsGroupContext.d.ts +9 -0
- package/dist/select/SelectLabel.d.ts +8 -0
- package/dist/select/SelectLeadingIcon.d.ts +7 -0
- package/dist/select/SelectPlaceholder.d.ts +10 -0
- package/dist/select/SelectTrigger.d.ts +16 -0
- package/dist/select/SelectTrigger.styles.d.ts +5 -0
- package/dist/select/SelectValue.d.ts +15 -0
- package/dist/select/index.d.mts +12 -158
- package/dist/select/index.d.ts +12 -158
- package/dist/select/index.js +2 -581
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +207 -339
- package/dist/select/index.mjs.map +1 -1
- package/dist/select/types.d.ts +6 -0
- package/dist/select/utils.d.ts +4 -0
- package/dist/skeleton/Skeleton.d.ts +17 -0
- package/dist/skeleton/Skeleton.styles.d.ts +5 -0
- package/dist/skeleton/SkeletonItem.d.ts +31 -0
- package/dist/skeleton/SkeletonItem.styles.d.ts +8 -0
- package/dist/skeleton/index.d.mts +8 -67
- package/dist/skeleton/index.d.ts +8 -67
- package/dist/skeleton/index.js +2 -206
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs +64 -96
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/Slider.d.ts +60 -0
- package/dist/slider/Slider.styles.d.ts +1 -0
- package/dist/slider/SliderContext.d.ts +7 -0
- package/dist/slider/SliderThumb.d.ts +14 -0
- package/dist/slider/SliderThumb.styles.d.ts +5 -0
- package/dist/slider/SliderTrack.d.ts +14 -0
- package/dist/slider/SliderTrack.styles.d.ts +9 -0
- package/dist/slider/index.d.mts +8 -97
- package/dist/slider/index.d.ts +8 -97
- package/dist/slider/index.js +2 -220
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +94 -111
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/Slot.d.ts +12 -0
- package/dist/slot/index.d.mts +1 -16
- package/dist/slot/index.d.ts +1 -16
- package/dist/slot/index.js +2 -51
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs +5 -9
- package/dist/slot/index.mjs.map +1 -1
- package/dist/snackbar/Snackbar.d.ts +29 -0
- package/dist/snackbar/SnackbarItem.d.ts +49 -0
- package/dist/snackbar/SnackbarItem.styles.d.ts +10 -0
- package/dist/snackbar/SnackbarItemAction.d.ts +10 -0
- package/dist/snackbar/SnackbarItemClose.d.ts +9 -0
- package/dist/snackbar/SnackbarItemContext.d.ts +8 -0
- package/dist/snackbar/SnackbarItemIcon.d.ts +7 -0
- package/dist/snackbar/SnackbarRegion.d.ts +30 -0
- package/dist/snackbar/SnackbarRegion.styles.d.ts +5 -0
- package/dist/snackbar/index.d.mts +13 -158
- package/dist/snackbar/index.d.ts +13 -158
- package/dist/snackbar/index.js +2 -1756
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +237 -429
- package/dist/snackbar/index.mjs.map +1 -1
- package/dist/snackbar/snackbarVariants.d.ts +82 -0
- package/dist/snackbar/useSnackbarGlobalStore.d.ts +18 -0
- package/dist/snackbar/useSwipe.d.ts +15 -0
- package/dist/spinner/Spinner.d.ts +9 -0
- package/dist/spinner/Spinner.styles.d.ts +7 -0
- package/dist/spinner/index.d.mts +1 -21
- package/dist/spinner/index.d.ts +1 -21
- package/dist/spinner/index.js +2 -139
- package/dist/spinner/index.js.map +1 -1
- package/dist/spinner/index.mjs +3 -7
- package/dist/spinner/index.mjs.map +1 -1
- package/dist/stepper/Stepper.d.ts +9 -0
- package/dist/stepper/StepperButton.d.ts +14 -0
- package/dist/stepper/StepperInput.d.ts +7 -0
- package/dist/stepper/index.d.mts +9 -81
- package/dist/stepper/index.d.ts +9 -81
- package/dist/stepper/index.js +2 -1847
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs +143 -195
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/stepper/types.d.ts +46 -0
- package/dist/stepper/useStepper.d.ts +2 -0
- package/dist/switch/Switch.d.ts +6 -0
- package/dist/switch/SwitchInput.d.ts +51 -0
- package/dist/switch/SwitchInput.styles.d.ts +16 -0
- package/dist/switch/SwitchLabel.d.ts +17 -0
- package/dist/switch/SwitchLabel.styles.d.ts +5 -0
- package/dist/switch/index.d.mts +1 -64
- package/dist/switch/index.d.ts +1 -64
- package/dist/switch/index.js +2 -327
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +90 -130
- package/dist/switch/index.mjs.map +1 -1
- package/dist/tabs/Tabs.d.ts +24 -0
- package/dist/tabs/TabsContent.d.ts +22 -0
- package/dist/tabs/TabsContent.styles.d.ts +3 -0
- package/dist/tabs/TabsContext.d.ts +7 -0
- package/dist/tabs/TabsList.d.ts +20 -0
- package/dist/tabs/TabsList.styles.d.ts +3 -0
- package/dist/tabs/TabsPopover.d.ts +29 -0
- package/dist/tabs/TabsPopoverAbstraction.d.ts +27 -0
- package/dist/tabs/TabsRoot.styles.d.ts +1 -0
- package/dist/tabs/TabsTrigger.d.ts +41 -0
- package/dist/tabs/TabsTrigger.styles.d.ts +8 -0
- package/dist/tabs/index.d.mts +13 -137
- package/dist/tabs/index.d.ts +13 -137
- package/dist/tabs/index.js +2 -1830
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +224 -350
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tabs/useResizeObserver.d.ts +8 -0
- package/dist/tag/Tag.d.ts +17 -0
- package/dist/tag/Tag.styles.d.ts +8 -0
- package/dist/tag/index.d.mts +1 -29
- package/dist/tag/index.d.ts +1 -29
- package/dist/tag/index.js +2 -283
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +66 -90
- package/dist/tag/index.mjs.map +1 -1
- package/dist/tag/variants/filled.d.ts +41 -0
- package/dist/tag/variants/index.d.mts +3 -0
- package/dist/tag/variants/index.d.ts +3 -0
- package/dist/tag/variants/outlined.d.ts +37 -0
- package/dist/tag/variants/tinted.d.ts +37 -0
- package/dist/text-link/TextLink.d.ts +16 -0
- package/dist/text-link/index.d.mts +1 -20
- package/dist/text-link/index.d.ts +1 -20
- package/dist/text-link/index.js +2 -100
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs +3 -6
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/Textarea.d.ts +14 -0
- package/dist/textarea/TextareaClearButton.d.ts +10 -0
- package/dist/textarea/TextareaGroup.d.ts +6 -0
- package/dist/textarea/TextareaLeadingIcon.d.ts +7 -0
- package/dist/textarea/TextareaTrailingIcon.d.ts +7 -0
- package/dist/textarea/index.d.mts +10 -53
- package/dist/textarea/index.d.ts +10 -53
- package/dist/textarea/index.js +2 -797
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +50 -83
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/Toast.d.ts +4 -0
- package/dist/toast/Toast.styles.d.ts +10 -0
- package/dist/toast/index.d.mts +10 -53
- package/dist/toast/index.d.ts +10 -53
- package/dist/toast/index.js +2 -1454
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +126 -180
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toast/types.d.ts +41 -0
- package/dist/toast/useRenderSlot.d.ts +3 -0
- package/dist/toast/useToastManager.d.ts +2 -0
- package/dist/visually-hidden/VisuallyHidden.d.ts +12 -0
- package/dist/visually-hidden/index.d.mts +1 -16
- package/dist/visually-hidden/index.d.ts +1 -16
- package/dist/visually-hidden/index.js +2 -67
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs +3 -6
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +6 -6
- package/dist/Input-N8AWWSmt.d.mts +0 -41
- package/dist/Input-N8AWWSmt.d.ts +0 -41
- package/dist/InputTrailingIcon-BBp7sE6D.d.mts +0 -20
- package/dist/InputTrailingIcon-ZZx8PoJy.d.ts +0 -20
- package/dist/LabelRequiredIndicator-DRnCzHMU.d.mts +0 -19
- package/dist/LabelRequiredIndicator-DRnCzHMU.d.ts +0 -19
- package/dist/chunk-2YM6GKWW.mjs.map +0 -1
- package/dist/chunk-6QCEPQ3U.mjs +0 -26
- package/dist/chunk-6QCEPQ3U.mjs.map +0 -1
- package/dist/chunk-7EWSMIZU.mjs +0 -214
- package/dist/chunk-7EWSMIZU.mjs.map +0 -1
- package/dist/chunk-DCXWGQVZ.mjs +0 -53
- package/dist/chunk-DCXWGQVZ.mjs.map +0 -1
- package/dist/chunk-GAK4SC2F.mjs.map +0 -1
- package/dist/chunk-GPJMLIHC.mjs +0 -308
- package/dist/chunk-GPJMLIHC.mjs.map +0 -1
- package/dist/chunk-HLXYG643.mjs +0 -52
- package/dist/chunk-HLXYG643.mjs.map +0 -1
- package/dist/chunk-KEGAAGJW.mjs +0 -36
- package/dist/chunk-KEGAAGJW.mjs.map +0 -1
- package/dist/chunk-RKPP7ZOK.mjs.map +0 -1
- package/dist/chunk-UMUMFMFB.mjs +0 -68
- package/dist/chunk-UMUMFMFB.mjs.map +0 -1
- package/dist/chunk-VBX7BTNU.mjs +0 -614
- package/dist/chunk-VBX7BTNU.mjs.map +0 -1
- package/dist/chunk-XZ47F6TP.mjs.map +0 -1
- package/dist/index-Cno_GFuW.d.mts +0 -93
- package/dist/index-Cno_GFuW.d.ts +0 -93
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/avatar/Avatar.tsx","../../src/avatar/context.ts","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n xs: 24,\n sm: 32,\n md: 40,\n lg: 56,\n xl: 64, // default\n '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n className,\n size = 'xl',\n isOnline = false,\n onlineText,\n username,\n asChild,\n children,\n shape = 'circle',\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : 'div'\n const contextValue = React.useMemo(\n () => ({\n size,\n isOnline,\n onlineText,\n username,\n shape,\n pixelSize: sizeMap[size],\n }),\n [size, isOnline, username, shape, onlineText]\n )\n\n return (\n <AvatarContext.Provider value={contextValue}>\n <Comp\n ref={ref}\n style={{\n width: sizeMap[size],\n height: sizeMap[size],\n }}\n data-spark-component=\"avatar\"\n className={cx('relative inline-flex items-center justify-center', className)}\n {...props}\n >\n {children}\n </Comp>\n </AvatarContext.Provider>\n )\n }\n)\n\nAvatar.displayName = 'Avatar'\n","import * as React from 'react'\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n const context = React.useContext(AvatarContext)\n if (!context) {\n throw new Error('useAvatarContext must be used within an Avatar component')\n }\n return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n asChild?: boolean\n}\n\nexport const AvatarImage = ({\n className,\n asChild,\n src,\n onLoad,\n onError,\n ...props\n}: AvatarImageProps) => {\n const { username, isOnline, onlineText } = useAvatarContext()\n const Comp = asChild ? Slot : 'img'\n\n const [isVisible, setIsVisible] = useState(false)\n\n const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n // Reset visibility when src changes\n useEffect(() => {\n setIsVisible(false)\n }, [src])\n\n // Don't render the image if src is undefined or null\n if (!src) {\n return null\n }\n\n const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setIsVisible(true)\n onLoad?.(event)\n }\n\n const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setIsVisible(false)\n onError?.(event)\n }\n\n return (\n <Comp\n aria-hidden\n className={cx(\n 'absolute inset-0 size-full',\n 'object-cover',\n { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n 'focus-visible:u-outline',\n isVisible ? 'block' : 'hidden',\n className\n )}\n alt={accessibleName}\n src={src}\n onLoad={handleLoad}\n onError={handleError}\n {...props}\n />\n )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean\n angle?: number\n ariaLabel: string\n}\n\nexport const AvatarAction = ({\n className,\n children,\n asChild,\n angle = 135,\n ariaLabel,\n ...props\n}: AvatarActionProps) => {\n const Comp = asChild ? Slot : IconButton\n const { pixelSize, shape } = useAvatarContext()\n\n function getBadgePosition(circleSize: number) {\n const angleRad = ((90 - angle) * Math.PI) / 180\n const circleRadius = circleSize / 2\n\n return {\n x: circleRadius + circleRadius * Math.cos(angleRad),\n y: circleRadius - circleRadius * Math.sin(angleRad),\n }\n }\n\n const position = getBadgePosition(pixelSize)\n\n const isCustomElement = asChild\n\n return (\n <Comp\n data-spark-component=\"avatar-action\"\n style={{\n position: 'absolute',\n ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n }}\n className={cx(\n 'z-raised',\n shape === 'circle'\n ? '-translate-x-1/2 -translate-y-1/2'\n : 'translate-x-1/4 translate-y-1/4',\n { 'shadow-sm': !isCustomElement },\n className\n )}\n aria-label={ariaLabel}\n title={ariaLabel}\n {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n {...props}\n >\n {children || (\n <Icon size=\"sm\">\n <PenOutline />\n </Icon>\n )}\n </Comp>\n )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n if (!isOnline) return null\n\n function getBadgePosition(circleSize: number) {\n const angleRad = ((90 - angle) * Math.PI) / 180\n const circleRadius = circleSize / 2\n\n return {\n x: circleRadius + circleRadius * Math.cos(angleRad),\n y: circleRadius - circleRadius * Math.sin(angleRad),\n }\n }\n\n const badgePosition = getBadgePosition(pixelSize)\n\n return (\n <div\n data-spark-component=\"avatar-online-badge\"\n role=\"status\"\n aria-label={onlineText}\n style={{\n ...(shape === 'circle'\n ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n : { right: '0px', bottom: '0px' }),\n }}\n className={cx(\n 'bg-success outline-surface absolute rounded-full',\n shape === 'circle'\n ? '-translate-x-1/2 -translate-y-1/2'\n : 'translate-x-1/4 translate-y-1/4',\n ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n )}\n {...props}\n />\n )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n const { shape, isOnline, onlineText, username } = useAvatarContext()\n const Comp = asChild ? Slot : 'div'\n\n const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n return (\n <Comp\n {...(!asChild && { role: 'img' })}\n aria-label={accessibleName}\n title={accessibleName}\n className={cx(\n 'group default:border-outline relative size-full overflow-hidden',\n 'focus-visible:u-outline',\n {\n 'default:rounded-full': shape === 'circle',\n 'default:rounded-md': shape === 'square',\n 'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n },\n className\n )}\n {...props}\n >\n {children}\n </Comp>\n )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n className?: string\n children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n const { size, username } = useAvatarContext()\n\n const firstLetter = username?.charAt(0)\n\n return (\n <div\n aria-hidden\n className={cx(\n 'absolute inset-0 flex size-full items-center justify-center',\n 'default:bg-neutral default:text-on-neutral',\n {\n 'text-display-1': size === '2xl',\n 'text-display-2': ['xl', 'lg'].includes(size),\n 'text-display-3': size === 'md',\n 'text-headline-2': size === 'sm',\n 'text-body-2 font-bold': size === 'xs',\n },\n className\n )}\n {...props}\n >\n {children || firstLetter}\n </div>\n )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { Avatar } from './Avatar'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarUser } from './AvatarUser'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent\n extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {\n Image: typeof AvatarImage\n Action: typeof AvatarAction\n OnlineBadge: typeof AvatarOnlineBadge\n User: typeof AvatarUser\n Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,UAAU;AACnB,YAAYA,YAAW;;;ACDvB,YAAY,WAAW;AAGvB,IAAM,gBAAsB,oBAA8C,MAAS;AAE5E,IAAM,mBAAmB,MAAM;AACpC,QAAM,UAAgB,iBAAW,aAAa;AAC9C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACA,SAAO;AACT;;;ADmCQ;AAvCR,IAAM,UAAU;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,OAAO;AACT;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,OAAO,UAAU,OAAO;AAC9B,UAAM,eAAqB;AAAA,MACzB,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ,IAAI;AAAA,MACzB;AAAA,MACA,CAAC,MAAM,UAAU,UAAU,OAAO,UAAU;AAAA,IAC9C;AAEA,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,OAAO,QAAQ,IAAI;AAAA,UACnB,QAAQ,QAAQ,IAAI;AAAA,QACtB;AAAA,QACA,wBAAqB;AAAA,QACrB,WAAW,GAAG,oDAAoD,SAAS;AAAA,QAC1E,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AE/DrB,SAAS,MAAAC,WAAU;AACnB,SAAS,WAAW,gBAAgB;AA6ChC,gBAAAC,YAAA;AApCG,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,QAAM,EAAE,UAAU,UAAU,WAAW,IAAI,iBAAiB;AAC5D,QAAM,OAAO,UAAU,OAAO;AAE9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,iBAAiB,YAAY,aAAa,GAAG,QAAQ,KAAK,UAAU,MAAM;AAGhF,YAAU,MAAM;AACd,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,GAAG,CAAC;AAGR,MAAI,CAAC,KAAK;AACR,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,UAAyD;AAC3E,iBAAa,IAAI;AACjB,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,cAAc,CAAC,UAAyD;AAC5E,iBAAa,KAAK;AAClB,cAAU,KAAK;AAAA,EACjB;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA,EAAE,qDAAqD,MAAM,QAAQ;AAAA,QACrE;AAAA,QACA,YAAY,UAAU;AAAA,QACtB;AAAA,MACF;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,YAAY,cAAc;;;ACjE1B,SAAS,kBAAkB;AAC3B,SAAS,MAAAC,WAAU;AA6DT,gBAAAC,YAAA;AAhDH,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,EAAE,WAAW,MAAM,IAAI,iBAAiB;AAE9C,WAAS,iBAAiB,YAAoB;AAC5C,UAAM,YAAa,KAAK,SAAS,KAAK,KAAM;AAC5C,UAAM,eAAe,aAAa;AAElC,WAAO;AAAA,MACL,GAAG,eAAe,eAAe,KAAK,IAAI,QAAQ;AAAA,MAClD,GAAG,eAAe,eAAe,KAAK,IAAI,QAAQ;AAAA,IACpD;AAAA,EACF;AAEA,QAAM,WAAW,iBAAiB,SAAS;AAE3C,QAAM,kBAAkB;AAExB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,GAAI,UAAU,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC;AAAA,QAChF,GAAI,UAAU,WAAW,EAAE,OAAO,OAAO,QAAQ,MAAM,IAAI,CAAC;AAAA,MAC9D;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACA,UAAU,WACN,sCACA;AAAA,QACJ,EAAE,aAAa,CAAC,gBAAgB;AAAA,QAChC;AAAA,MACF;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,MACN,GAAI,CAAC,kBAAkB,EAAE,MAAM,MAAM,QAAQ,WAAW,QAAQ,WAAW,IAAI,CAAC;AAAA,MAChF,GAAG;AAAA,MAEH,sBACC,gBAAAD,KAAC,QAAK,MAAK,MACT,0BAAAA,KAAC,cAAW,GACd;AAAA;AAAA,EAEJ;AAEJ;AAEA,aAAa,cAAc;;;ACrE3B,SAAS,MAAAE,WAAU;AA2Bf,gBAAAC,YAAA;AAlBG,IAAM,oBAAoB,CAAC,EAAE,QAAQ,KAAK,GAAG,MAAM,MAA8B;AACtF,QAAM,EAAE,UAAU,WAAW,OAAO,YAAY,KAAK,IAAI,iBAAiB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,WAAS,iBAAiB,YAAoB;AAC5C,UAAM,YAAa,KAAK,SAAS,KAAK,KAAM;AAC5C,UAAM,eAAe,aAAa;AAElC,WAAO;AAAA,MACL,GAAG,eAAe,eAAe,KAAK,IAAI,QAAQ;AAAA,MAClD,GAAG,eAAe,eAAe,KAAK,IAAI,QAAQ;AAAA,IACpD;AAAA,EACF;AAEA,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,GAAI,UAAU,WACV,EAAE,MAAM,GAAG,cAAc,CAAC,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,IAC5D,EAAE,OAAO,OAAO,QAAQ,MAAM;AAAA,MACpC;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACA,UAAU,WACN,sCACA;AAAA,QACJ,CAAC,MAAM,MAAM,KAAK,EAAE,SAAS,IAAI,IAAIA,IAAG,sBAAsB,IAAIA,IAAG,qBAAqB;AAAA,MAC5F;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,cAAc;;;AChDhC,SAAS,MAAAC,WAAU;AAgBf,gBAAAC,YAAA;AAPG,IAAM,aAAa,CAAC,EAAE,SAAS,UAAU,WAAW,GAAG,MAAM,MAAwB;AAC1F,QAAM,EAAE,OAAO,UAAU,YAAY,SAAS,IAAI,iBAAiB;AACnE,QAAM,OAAO,UAAU,OAAO;AAE9B,QAAM,iBAAiB,YAAY,aAAa,GAAG,QAAQ,KAAK,UAAU,MAAM;AAEhF,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,CAAC,WAAW,EAAE,MAAM,MAAM;AAAA,MAC/B,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,wBAAwB,UAAU;AAAA,UAClC,sBAAsB,UAAU;AAAA,UAChC,sCAAsC,WAAW,MAAM;AAAA,QACzD;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,WAAW,cAAc;;;ACrCzB,SAAS,MAAAC,WAAU;AAef,gBAAAC,YAAA;AANG,IAAM,oBAAoB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,MAA8B;AAC9F,QAAM,EAAE,MAAM,SAAS,IAAI,iBAAiB;AAE5C,QAAM,cAAc,UAAU,OAAO,CAAC;AAEtC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACE,kBAAkB,SAAS;AAAA,UAC3B,kBAAkB,CAAC,MAAM,IAAI,EAAE,SAAS,IAAI;AAAA,UAC5C,kBAAkB,SAAS;AAAA,UAC3B,mBAAmB,SAAS;AAAA,UAC5B,yBAAyB,SAAS;AAAA,QACpC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;AAEA,kBAAkB,cAAc;;;ACnBhC,IAAM,kBAAkB;AAExB,gBAAgB,QAAQ;AACxB,gBAAgB,SAAS;AACzB,gBAAgB,cAAc;AAC9B,gBAAgB,OAAO;AACvB,gBAAgB,cAAc;","names":["React","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx"]}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n const context = React.useContext(AvatarContext)\n if (!context) {\n throw new Error('useAvatarContext must be used within an Avatar component')\n }\n return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n xs: 24,\n sm: 32,\n md: 40,\n lg: 56,\n xl: 64, // default\n '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n (\n {\n className,\n size = 'xl',\n isOnline = false,\n onlineText,\n username,\n asChild,\n children,\n shape = 'circle',\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : 'div'\n const contextValue = React.useMemo(\n () => ({\n size,\n isOnline,\n onlineText,\n username,\n shape,\n pixelSize: sizeMap[size],\n }),\n [size, isOnline, username, shape, onlineText]\n )\n\n return (\n <AvatarContext.Provider value={contextValue}>\n <Comp\n ref={ref}\n style={{\n width: sizeMap[size],\n height: sizeMap[size],\n }}\n data-spark-component=\"avatar\"\n className={cx('relative inline-flex items-center justify-center', className)}\n {...props}\n >\n {children}\n </Comp>\n </AvatarContext.Provider>\n )\n }\n)\n\nAvatar.displayName = 'Avatar'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n asChild?: boolean\n}\n\nexport const AvatarImage = ({\n className,\n asChild,\n src,\n onLoad,\n onError,\n ...props\n}: AvatarImageProps) => {\n const { username, isOnline, onlineText } = useAvatarContext()\n const Comp = asChild ? Slot : 'img'\n\n const [isVisible, setIsVisible] = useState(false)\n\n const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n // Reset visibility when src changes\n useEffect(() => {\n setIsVisible(false)\n }, [src])\n\n // Don't render the image if src is undefined or null\n if (!src) {\n return null\n }\n\n const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setIsVisible(true)\n onLoad?.(event)\n }\n\n const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n setIsVisible(false)\n onError?.(event)\n }\n\n return (\n <Comp\n aria-hidden\n className={cx(\n 'absolute inset-0 size-full',\n 'object-cover',\n { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n 'focus-visible:u-outline',\n isVisible ? 'block' : 'hidden',\n className\n )}\n alt={accessibleName}\n src={src}\n onLoad={handleLoad}\n onError={handleError}\n {...props}\n />\n )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean\n angle?: number\n ariaLabel: string\n}\n\nexport const AvatarAction = ({\n className,\n children,\n asChild,\n angle = 135,\n ariaLabel,\n ...props\n}: AvatarActionProps) => {\n const Comp = asChild ? Slot : IconButton\n const { pixelSize, shape } = useAvatarContext()\n\n function getBadgePosition(circleSize: number) {\n const angleRad = ((90 - angle) * Math.PI) / 180\n const circleRadius = circleSize / 2\n\n return {\n x: circleRadius + circleRadius * Math.cos(angleRad),\n y: circleRadius - circleRadius * Math.sin(angleRad),\n }\n }\n\n const position = getBadgePosition(pixelSize)\n\n const isCustomElement = asChild\n\n return (\n <Comp\n data-spark-component=\"avatar-action\"\n style={{\n position: 'absolute',\n ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n }}\n className={cx(\n 'z-raised',\n shape === 'circle'\n ? '-translate-x-1/2 -translate-y-1/2'\n : 'translate-x-1/4 translate-y-1/4',\n { 'shadow-sm': !isCustomElement },\n className\n )}\n aria-label={ariaLabel}\n title={ariaLabel}\n {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n {...props}\n >\n {children || (\n <Icon size=\"sm\">\n <PenOutline />\n </Icon>\n )}\n </Comp>\n )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n if (!isOnline) return null\n\n function getBadgePosition(circleSize: number) {\n const angleRad = ((90 - angle) * Math.PI) / 180\n const circleRadius = circleSize / 2\n\n return {\n x: circleRadius + circleRadius * Math.cos(angleRad),\n y: circleRadius - circleRadius * Math.sin(angleRad),\n }\n }\n\n const badgePosition = getBadgePosition(pixelSize)\n\n return (\n <div\n data-spark-component=\"avatar-online-badge\"\n role=\"status\"\n aria-label={onlineText}\n style={{\n ...(shape === 'circle'\n ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n : { right: '0px', bottom: '0px' }),\n }}\n className={cx(\n 'bg-success outline-surface absolute rounded-full',\n shape === 'circle'\n ? '-translate-x-1/2 -translate-y-1/2'\n : 'translate-x-1/4 translate-y-1/4',\n ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n )}\n {...props}\n />\n )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n const { shape, isOnline, onlineText, username } = useAvatarContext()\n const Comp = asChild ? Slot : 'div'\n\n const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n return (\n <Comp\n {...(!asChild && { role: 'img' })}\n aria-label={accessibleName}\n title={accessibleName}\n className={cx(\n 'group default:border-outline relative size-full overflow-hidden',\n 'focus-visible:u-outline',\n {\n 'default:rounded-full': shape === 'circle',\n 'default:rounded-md': shape === 'square',\n 'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n },\n className\n )}\n {...props}\n >\n {children}\n </Comp>\n )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n className?: string\n children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n const { size, username } = useAvatarContext()\n\n const firstLetter = username?.charAt(0)\n\n return (\n <div\n aria-hidden\n className={cx(\n 'absolute inset-0 flex size-full items-center justify-center',\n 'default:bg-neutral default:text-on-neutral',\n {\n 'text-display-1': size === '2xl',\n 'text-display-2': ['xl', 'lg'].includes(size),\n 'text-display-3': size === 'md',\n 'text-headline-2': size === 'sm',\n 'text-body-2 font-bold': size === 'xs',\n },\n className\n )}\n {...props}\n >\n {children || firstLetter}\n </div>\n )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { Avatar } from './Avatar'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarUser } from './AvatarUser'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent\n extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {\n Image: typeof AvatarImage\n Action: typeof AvatarAction\n OnlineBadge: typeof AvatarOnlineBadge\n User: typeof AvatarUser\n Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"names":["AvatarContext","React","useAvatarContext","context","sizeMap","Avatar","className","size","isOnline","onlineText","username","asChild","children","shape","props","ref","Comp","Slot","contextValue","jsx","cx","AvatarImage","src","onLoad","onError","isVisible","setIsVisible","useState","accessibleName","useEffect","handleLoad","event","handleError","AvatarAction","angle","ariaLabel","IconButton","pixelSize","getBadgePosition","circleSize","angleRad","circleRadius","position","isCustomElement","Icon","PenOutline","AvatarOnlineBadge","badgePosition","AvatarUser","AvatarPlaceholder","firstLetter","AvatarComponent"],"mappings":"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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { AvatarAction } from './AvatarAction';
|
|
2
|
+
import { AvatarImage } from './AvatarImage';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
export interface AvatarContextValue {
|
|
5
|
+
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
6
|
+
isOnline: boolean;
|
|
7
|
+
onlineText?: string;
|
|
8
|
+
username: string;
|
|
9
|
+
src?: string;
|
|
10
|
+
shape: 'circle' | 'square';
|
|
11
|
+
pixelSize: number;
|
|
12
|
+
}
|
|
13
|
+
export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
14
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
15
|
+
isOnline?: boolean;
|
|
16
|
+
onlineText?: string;
|
|
17
|
+
username: string;
|
|
18
|
+
asChild?: boolean;
|
|
19
|
+
shape?: 'circle' | 'square';
|
|
20
|
+
}
|
|
21
|
+
export interface AvatarComponent extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {
|
|
22
|
+
Image: typeof AvatarImage;
|
|
23
|
+
Action: typeof AvatarAction;
|
|
24
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { PropsWithChildren, Ref } from 'react';
|
|
2
|
+
import { BadgeItemProps } from './BadgeItem';
|
|
3
|
+
export type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
|
|
4
|
+
ref?: Ref<HTMLElement>;
|
|
5
|
+
};
|
|
6
|
+
export declare const Badge: {
|
|
7
|
+
({ children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { HTMLAttributes, Ref } from 'react';
|
|
2
|
+
import { StylesProps } from './BadgeItem.styles';
|
|
3
|
+
export interface BadgeItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {
|
|
4
|
+
/**
|
|
5
|
+
* Numeric value used as indicator inside the component.
|
|
6
|
+
*/
|
|
7
|
+
count?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Maximum numeric value to be dispayed as a count value.
|
|
10
|
+
* @default 99
|
|
11
|
+
*/
|
|
12
|
+
overflowCount?: number;
|
|
13
|
+
/**
|
|
14
|
+
* A custom label for accessibility purposes. It can also be defined as a builder function
|
|
15
|
+
* to handle dynamic inner data to create a custom label.
|
|
16
|
+
*/
|
|
17
|
+
'aria-label'?: string | (({ count, overflowCount }: {
|
|
18
|
+
count?: number;
|
|
19
|
+
overflowCount?: number;
|
|
20
|
+
}) => string);
|
|
21
|
+
/**
|
|
22
|
+
* Describes the way the component is displayed: relative to another element or just standalone.
|
|
23
|
+
* @default 'relative'
|
|
24
|
+
*/
|
|
25
|
+
type?: 'relative' | 'standalone';
|
|
26
|
+
ref?: Ref<HTMLSpanElement>;
|
|
27
|
+
}
|
|
28
|
+
export declare const BadgeItem: {
|
|
29
|
+
({ intent, size, type, count, overflowCount, "aria-label": label, className, ...others }: BadgeItemProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
displayName: string;
|
|
31
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const styles: (props?: ({
|
|
3
|
+
intent?: "main" | "alert" | "support" | "accent" | "basic" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
|
|
4
|
+
size?: "sm" | "md" | null | undefined;
|
|
5
|
+
type?: "relative" | "standalone" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export type StylesProps = VariantProps<typeof styles>;
|
package/dist/badge/index.d.mts
CHANGED
|
@@ -1,47 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { HTMLAttributes, Ref, PropsWithChildren } from 'react';
|
|
3
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
-
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
declare const styles: (props?: ({
|
|
7
|
-
intent?: "main" | "support" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "basic" | null | undefined;
|
|
8
|
-
size?: "sm" | "md" | null | undefined;
|
|
9
|
-
type?: "relative" | "standalone" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
type StylesProps = VariantProps<typeof styles>;
|
|
12
|
-
|
|
13
|
-
interface BadgeItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {
|
|
14
|
-
/**
|
|
15
|
-
* Numeric value used as indicator inside the component.
|
|
16
|
-
*/
|
|
17
|
-
count?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Maximum numeric value to be dispayed as a count value.
|
|
20
|
-
* @default 99
|
|
21
|
-
*/
|
|
22
|
-
overflowCount?: number;
|
|
23
|
-
/**
|
|
24
|
-
* A custom label for accessibility purposes. It can also be defined as a builder function
|
|
25
|
-
* to handle dynamic inner data to create a custom label.
|
|
26
|
-
*/
|
|
27
|
-
'aria-label'?: string | (({ count, overflowCount }: {
|
|
28
|
-
count?: number;
|
|
29
|
-
overflowCount?: number;
|
|
30
|
-
}) => string);
|
|
31
|
-
/**
|
|
32
|
-
* Describes the way the component is displayed: relative to another element or just standalone.
|
|
33
|
-
* @default 'relative'
|
|
34
|
-
*/
|
|
35
|
-
type?: 'relative' | 'standalone';
|
|
36
|
-
ref?: Ref<HTMLSpanElement>;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
|
|
40
|
-
ref?: Ref<HTMLElement>;
|
|
41
|
-
};
|
|
42
|
-
declare const Badge: {
|
|
43
|
-
({ children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
44
|
-
displayName: string;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export { Badge, type BadgeProps };
|
|
1
|
+
export * from './Badge';
|
package/dist/badge/index.d.ts
CHANGED
|
@@ -1,47 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { HTMLAttributes, Ref, PropsWithChildren } from 'react';
|
|
3
|
-
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
-
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
declare const styles: (props?: ({
|
|
7
|
-
intent?: "main" | "support" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "basic" | null | undefined;
|
|
8
|
-
size?: "sm" | "md" | null | undefined;
|
|
9
|
-
type?: "relative" | "standalone" | null | undefined;
|
|
10
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
11
|
-
type StylesProps = VariantProps<typeof styles>;
|
|
12
|
-
|
|
13
|
-
interface BadgeItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {
|
|
14
|
-
/**
|
|
15
|
-
* Numeric value used as indicator inside the component.
|
|
16
|
-
*/
|
|
17
|
-
count?: number;
|
|
18
|
-
/**
|
|
19
|
-
* Maximum numeric value to be dispayed as a count value.
|
|
20
|
-
* @default 99
|
|
21
|
-
*/
|
|
22
|
-
overflowCount?: number;
|
|
23
|
-
/**
|
|
24
|
-
* A custom label for accessibility purposes. It can also be defined as a builder function
|
|
25
|
-
* to handle dynamic inner data to create a custom label.
|
|
26
|
-
*/
|
|
27
|
-
'aria-label'?: string | (({ count, overflowCount }: {
|
|
28
|
-
count?: number;
|
|
29
|
-
overflowCount?: number;
|
|
30
|
-
}) => string);
|
|
31
|
-
/**
|
|
32
|
-
* Describes the way the component is displayed: relative to another element or just standalone.
|
|
33
|
-
* @default 'relative'
|
|
34
|
-
*/
|
|
35
|
-
type?: 'relative' | 'standalone';
|
|
36
|
-
ref?: Ref<HTMLSpanElement>;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
|
|
40
|
-
ref?: Ref<HTMLElement>;
|
|
41
|
-
};
|
|
42
|
-
declare const Badge: {
|
|
43
|
-
({ children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
44
|
-
displayName: string;
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export { Badge, type BadgeProps };
|
|
1
|
+
export * from './Badge';
|
package/dist/badge/index.js
CHANGED
|
@@ -1,122 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/badge/index.ts
|
|
21
|
-
var badge_exports = {};
|
|
22
|
-
__export(badge_exports, {
|
|
23
|
-
Badge: () => Badge
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(badge_exports);
|
|
26
|
-
|
|
27
|
-
// src/badge/BadgeItem.styles.tsx
|
|
28
|
-
var import_internal_utils = require("@spark-ui/internal-utils");
|
|
29
|
-
var import_class_variance_authority = require("class-variance-authority");
|
|
30
|
-
var styles = (0, import_class_variance_authority.cva)(
|
|
31
|
-
["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
|
|
32
|
-
{
|
|
33
|
-
variants: {
|
|
34
|
-
/**
|
|
35
|
-
* Visual color appearance of the component.
|
|
36
|
-
* @default 'danger'
|
|
37
|
-
*/
|
|
38
|
-
intent: (0, import_internal_utils.makeVariants)({
|
|
39
|
-
main: ["bg-main", "text-on-main", "border-surface"],
|
|
40
|
-
support: ["bg-support", "text-on-support", "border-surface"],
|
|
41
|
-
accent: ["bg-accent", "text-on-accent", "border-surface"],
|
|
42
|
-
success: ["bg-success", "text-on-success", "border-surface"],
|
|
43
|
-
alert: ["bg-alert", "text-on-alert", "border-surface"],
|
|
44
|
-
danger: ["bg-error", "text-on-error", "border-surface"],
|
|
45
|
-
info: ["bg-info", "text-on-info", "border-surface"],
|
|
46
|
-
neutral: ["bg-neutral", "text-on-neutral", "border-surface"],
|
|
47
|
-
surface: ["bg-surface", "text-on-surface", "border-surface"],
|
|
48
|
-
basic: ["bg-basic", "text-on-basic", "border-surface"]
|
|
49
|
-
}),
|
|
50
|
-
/**
|
|
51
|
-
* Size of the component.
|
|
52
|
-
* @default 'md'
|
|
53
|
-
*/
|
|
54
|
-
size: (0, import_internal_utils.makeVariants)({
|
|
55
|
-
sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
|
|
56
|
-
md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
|
|
57
|
-
}),
|
|
58
|
-
/**
|
|
59
|
-
* Type of the component.
|
|
60
|
-
* @default 'relative'
|
|
61
|
-
*/
|
|
62
|
-
type: {
|
|
63
|
-
relative: ["absolute right-0 border-md", "translate-x-1/2 -translate-y-1/2"],
|
|
64
|
-
standalone: []
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
defaultVariants: {
|
|
68
|
-
intent: "danger",
|
|
69
|
-
size: "md",
|
|
70
|
-
type: "relative"
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
// src/badge/BadgeItem.tsx
|
|
76
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
77
|
-
var BadgeItem = ({
|
|
78
|
-
intent = "danger",
|
|
79
|
-
size = "md",
|
|
80
|
-
type = "relative",
|
|
81
|
-
count,
|
|
82
|
-
overflowCount = 99,
|
|
83
|
-
"aria-label": label,
|
|
84
|
-
className,
|
|
85
|
-
...others
|
|
86
|
-
}) => {
|
|
87
|
-
const hasOverflow = count && count > overflowCount;
|
|
88
|
-
const ariaLabel = typeof label === "function" ? label({ count, overflowCount }) : label;
|
|
89
|
-
const props = { ...others, "aria-label": ariaLabel };
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
-
"span",
|
|
92
|
-
{
|
|
93
|
-
"data-spark-component": "badge",
|
|
94
|
-
role: "status",
|
|
95
|
-
className: styles({
|
|
96
|
-
intent,
|
|
97
|
-
size,
|
|
98
|
-
type,
|
|
99
|
-
className
|
|
100
|
-
}),
|
|
101
|
-
...props,
|
|
102
|
-
children: hasOverflow ? `${overflowCount}+` : count
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
|
-
};
|
|
106
|
-
BadgeItem.displayName = "BadgeItem";
|
|
107
|
-
|
|
108
|
-
// src/badge/Badge.tsx
|
|
109
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
110
|
-
var Badge = ({ children, ...props }) => {
|
|
111
|
-
const isStandalone = !children;
|
|
112
|
-
return isStandalone ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative inline-flex", children: [
|
|
113
|
-
children,
|
|
114
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { ...props })
|
|
115
|
-
] });
|
|
116
|
-
};
|
|
117
|
-
Badge.displayName = "Badge";
|
|
118
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
119
|
-
0 && (module.exports = {
|
|
120
|
-
Badge
|
|
121
|
-
});
|
|
122
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("@spark-ui/internal-utils"),f=require("class-variance-authority"),g=f.cva(["inline-flex h-fit","empty:p-0","text-center font-bold","rounded-full box-content"],{variants:{intent:c.makeVariants({main:["bg-main","text-on-main","border-surface"],support:["bg-support","text-on-support","border-surface"],accent:["bg-accent","text-on-accent","border-surface"],success:["bg-success","text-on-success","border-surface"],alert:["bg-alert","text-on-alert","border-surface"],danger:["bg-error","text-on-error","border-surface"],info:["bg-info","text-on-info","border-surface"],neutral:["bg-neutral","text-on-neutral","border-surface"],surface:["bg-surface","text-on-surface","border-surface"],basic:["bg-basic","text-on-basic","border-surface"]}),size:c.makeVariants({sm:["text-small","px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]","empty:size-sz-8"],md:["text-caption","px-md py-sm","empty:size-sz-16"]}),type:{relative:["absolute right-0 border-md","translate-x-1/2 -translate-y-1/2"],standalone:[]}},defaultVariants:{intent:"danger",size:"md",type:"relative"}}),i=({intent:e="danger",size:t="md",type:o="relative",count:a,overflowCount:s=99,"aria-label":n,className:l,...u})=>{const b=a&&a>s,p=typeof n=="function"?n({count:a,overflowCount:s}):n,m={...u,"aria-label":p};return r.jsx("span",{"data-spark-component":"badge",role:"status",className:g({intent:e,size:t,type:o,className:l}),...m,children:b?`${s}+`:a})};i.displayName="BadgeItem";const d=({children:e,...t})=>!e?r.jsx(i,{type:"standalone",...t}):r.jsxs("div",{className:"relative inline-flex",children:[e,r.jsx(i,{...t})]});d.displayName="Badge";exports.Badge=d;
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
package/dist/badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n {\n variants: {\n /**\n * Visual color appearance of the component.\n * @default 'danger'\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'basic',\n ]\n >({\n main: ['bg-main', 'text-on-main', 'border-surface'],\n support: ['bg-support', 'text-on-support', 'border-surface'],\n accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n success: ['bg-success', 'text-on-success', 'border-surface'],\n alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n danger: ['bg-error', 'text-on-error', 'border-surface'],\n info: ['bg-info', 'text-on-info', 'border-surface'],\n neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n }),\n /**\n * Size of the component.\n * @default 'md'\n */\n size: makeVariants<'size', ['sm', 'md']>({\n sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n }),\n /**\n * Type of the component.\n * @default 'relative'\n */\n type: {\n relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n standalone: [],\n },\n },\n defaultVariants: {\n intent: 'danger',\n size: 'md',\n type: 'relative',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n StylesProps {\n /**\n * Numeric value used as indicator inside the component.\n */\n count?: number\n /**\n * Maximum numeric value to be dispayed as a count value.\n * @default 99\n */\n overflowCount?: number\n /**\n * A custom label for accessibility purposes. It can also be defined as a builder function\n * to handle dynamic inner data to create a custom label.\n */\n 'aria-label'?:\n | string\n | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n /**\n * Describes the way the component is displayed: relative to another element or just standalone.\n * @default 'relative'\n */\n type?: 'relative' | 'standalone'\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n intent = 'danger',\n size = 'md',\n type = 'relative',\n count,\n overflowCount = 99,\n 'aria-label': label,\n className,\n ...others\n}: BadgeItemProps) => {\n const hasOverflow = count && count > overflowCount\n const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n const props = { ...others, 'aria-label': ariaLabel }\n\n return (\n <span\n data-spark-component=\"badge\"\n role=\"status\"\n className={styles({\n intent,\n size,\n type,\n className,\n })}\n {...props}\n >\n {hasOverflow ? `${overflowCount}+` : count}\n </span>\n )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n const isStandalone = !children\n\n return isStandalone ? (\n <BadgeItem type=\"standalone\" {...props} />\n ) : (\n <div className=\"relative inline-flex\">\n {children}\n <BadgeItem {...props} />\n </div>\n )\n}\n\nBadge.displayName = 'Badge'\n"],"names":["styles","cva","makeVariants","BadgeItem","intent","size","type","count","overflowCount","label","className","others","hasOverflow","ariaLabel","props","jsx","Badge","children","jsxs"],"mappings":"iMAGaA,EAASC,EAAAA,IACpB,CAAC,oBAAqB,YAAa,wBAAyB,0BAA0B,EACtF,CACE,SAAU,CAKR,OAAQC,EAAAA,aAcN,CACA,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,OAAQ,CAAC,YAAa,iBAAkB,gBAAgB,EACxD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,MAAO,CAAC,WAAY,gBAAiB,gBAAgB,EACrD,OAAQ,CAAC,WAAY,gBAAiB,gBAAgB,EACtD,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,MAAO,CAAC,WAAY,gBAAiB,gBAAgB,CAAA,CACtD,EAKD,KAAMA,EAAAA,aAAmC,CACvC,GAAI,CAAC,aAAc,oDAAqD,iBAAiB,EACzF,GAAI,CAAC,eAAgB,cAAe,kBAAkB,CAAA,CACvD,EAKD,KAAM,CACJ,SAAU,CAAC,6BAA8B,kCAAkC,EAC3E,WAAY,CAAA,CAAC,CACf,EAEF,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,UAAA,CACR,CAEJ,EC7BaC,EAAY,CAAC,CACxB,OAAAC,EAAS,SACT,KAAAC,EAAO,KACP,KAAAC,EAAO,WACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,aAAcC,EACd,UAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAcL,GAASA,EAAQC,EAC/BK,EAAY,OAAOJ,GAAU,WAAaA,EAAM,CAAE,MAAAF,EAAO,cAAAC,CAAA,CAAe,EAAIC,EAC5EK,EAAQ,CAAE,GAAGH,EAAQ,aAAcE,CAAA,EAEzC,OACEE,EAAAA,IAAC,OAAA,CACC,uBAAqB,QACrB,KAAK,SACL,UAAWf,EAAO,CAChB,OAAAI,EACA,KAAAC,EACA,KAAAC,EACA,UAAAI,CAAA,CACD,EACA,GAAGI,EAEH,SAAAF,EAAc,GAAGJ,CAAa,IAAMD,CAAA,CAAA,CAG3C,EAEAJ,EAAU,YAAc,YCtDjB,MAAMa,EAAQ,CAAC,CAAE,SAAAC,EAAU,GAAGH,KACd,CAACG,EAGpBF,EAAAA,IAACZ,EAAA,CAAU,KAAK,aAAc,GAAGW,CAAA,CAAO,EAExCI,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACZ,SAAA,CAAAD,EACDF,MAACZ,EAAA,CAAW,GAAGW,CAAA,CAAO,CAAA,EACxB,EAIJE,EAAM,YAAc"}
|
package/dist/badge/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import { makeVariants } from "@spark-ui/internal-utils";
|
|
3
|
-
import { cva } from "class-variance-authority";
|
|
4
|
-
|
|
1
|
+
import { jsx as n, jsxs as f } from "react/jsx-runtime";
|
|
2
|
+
import { makeVariants as c } from "@spark-ui/internal-utils";
|
|
3
|
+
import { cva as u } from "class-variance-authority";
|
|
4
|
+
const x = u(
|
|
5
5
|
["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
|
|
6
6
|
{
|
|
7
7
|
variants: {
|
|
@@ -9,7 +9,7 @@ var styles = cva(
|
|
|
9
9
|
* Visual color appearance of the component.
|
|
10
10
|
* @default 'danger'
|
|
11
11
|
*/
|
|
12
|
-
intent:
|
|
12
|
+
intent: c({
|
|
13
13
|
main: ["bg-main", "text-on-main", "border-surface"],
|
|
14
14
|
support: ["bg-support", "text-on-support", "border-surface"],
|
|
15
15
|
accent: ["bg-accent", "text-on-accent", "border-surface"],
|
|
@@ -25,7 +25,7 @@ var styles = cva(
|
|
|
25
25
|
* Size of the component.
|
|
26
26
|
* @default 'md'
|
|
27
27
|
*/
|
|
28
|
-
size:
|
|
28
|
+
size: c({
|
|
29
29
|
sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
|
|
30
30
|
md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
|
|
31
31
|
}),
|
|
@@ -44,52 +44,40 @@ var styles = cva(
|
|
|
44
44
|
type: "relative"
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
)
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
overflowCount = 99,
|
|
57
|
-
"aria-label": label,
|
|
58
|
-
className,
|
|
59
|
-
...others
|
|
47
|
+
), o = ({
|
|
48
|
+
intent: e = "danger",
|
|
49
|
+
size: a = "md",
|
|
50
|
+
type: i = "relative",
|
|
51
|
+
count: t,
|
|
52
|
+
overflowCount: r = 99,
|
|
53
|
+
"aria-label": s,
|
|
54
|
+
className: d,
|
|
55
|
+
...l
|
|
60
56
|
}) => {
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
const props = { ...others, "aria-label": ariaLabel };
|
|
64
|
-
return /* @__PURE__ */ jsx(
|
|
57
|
+
const p = t && t > r, b = typeof s == "function" ? s({ count: t, overflowCount: r }) : s, m = { ...l, "aria-label": b };
|
|
58
|
+
return /* @__PURE__ */ n(
|
|
65
59
|
"span",
|
|
66
60
|
{
|
|
67
61
|
"data-spark-component": "badge",
|
|
68
62
|
role: "status",
|
|
69
|
-
className:
|
|
70
|
-
intent,
|
|
71
|
-
size,
|
|
72
|
-
type,
|
|
73
|
-
className
|
|
63
|
+
className: x({
|
|
64
|
+
intent: e,
|
|
65
|
+
size: a,
|
|
66
|
+
type: i,
|
|
67
|
+
className: d
|
|
74
68
|
}),
|
|
75
|
-
...
|
|
76
|
-
children:
|
|
69
|
+
...m,
|
|
70
|
+
children: p ? `${r}+` : t
|
|
77
71
|
}
|
|
78
72
|
);
|
|
79
73
|
};
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return isStandalone ? /* @__PURE__ */ jsx2(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
|
|
87
|
-
children,
|
|
88
|
-
/* @__PURE__ */ jsx2(BadgeItem, { ...props })
|
|
89
|
-
] });
|
|
90
|
-
};
|
|
91
|
-
Badge.displayName = "Badge";
|
|
74
|
+
o.displayName = "BadgeItem";
|
|
75
|
+
const g = ({ children: e, ...a }) => !e ? /* @__PURE__ */ n(o, { type: "standalone", ...a }) : /* @__PURE__ */ f("div", { className: "relative inline-flex", children: [
|
|
76
|
+
e,
|
|
77
|
+
/* @__PURE__ */ n(o, { ...a })
|
|
78
|
+
] });
|
|
79
|
+
g.displayName = "Badge";
|
|
92
80
|
export {
|
|
93
|
-
Badge
|
|
81
|
+
g as Badge
|
|
94
82
|
};
|
|
95
|
-
//# sourceMappingURL=index.mjs.map
|
|
83
|
+
//# sourceMappingURL=index.mjs.map
|
package/dist/badge/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n {\n variants: {\n /**\n * Visual color appearance of the component.\n * @default 'danger'\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'basic',\n ]\n >({\n main: ['bg-main', 'text-on-main', 'border-surface'],\n support: ['bg-support', 'text-on-support', 'border-surface'],\n accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n success: ['bg-success', 'text-on-success', 'border-surface'],\n alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n danger: ['bg-error', 'text-on-error', 'border-surface'],\n info: ['bg-info', 'text-on-info', 'border-surface'],\n neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n }),\n /**\n * Size of the component.\n * @default 'md'\n */\n size: makeVariants<'size', ['sm', 'md']>({\n sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n }),\n /**\n * Type of the component.\n * @default 'relative'\n */\n type: {\n relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n standalone: [],\n },\n },\n defaultVariants: {\n intent: 'danger',\n size: 'md',\n type: 'relative',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n StylesProps {\n /**\n * Numeric value used as indicator inside the component.\n */\n count?: number\n /**\n * Maximum numeric value to be dispayed as a count value.\n * @default 99\n */\n overflowCount?: number\n /**\n * A custom label for accessibility purposes. It can also be defined as a builder function\n * to handle dynamic inner data to create a custom label.\n */\n 'aria-label'?:\n | string\n | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n /**\n * Describes the way the component is displayed: relative to another element or just standalone.\n * @default 'relative'\n */\n type?: 'relative' | 'standalone'\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n intent = 'danger',\n size = 'md',\n type = 'relative',\n count,\n overflowCount = 99,\n 'aria-label': label,\n className,\n ...others\n}: BadgeItemProps) => {\n const hasOverflow = count && count > overflowCount\n const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n const props = { ...others, 'aria-label': ariaLabel }\n\n return (\n <span\n data-spark-component=\"badge\"\n role=\"status\"\n className={styles({\n intent,\n size,\n type,\n className,\n })}\n {...props}\n >\n {hasOverflow ? `${overflowCount}+` : count}\n </span>\n )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n const isStandalone = !children\n\n return isStandalone ? (\n <BadgeItem type=\"standalone\" {...props} />\n ) : (\n <div className=\"relative inline-flex\">\n {children}\n <BadgeItem {...props} />\n </div>\n )\n}\n\nBadge.displayName = 'Badge'\n"],"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n {\n variants: {\n /**\n * Visual color appearance of the component.\n * @default 'danger'\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'basic',\n ]\n >({\n main: ['bg-main', 'text-on-main', 'border-surface'],\n support: ['bg-support', 'text-on-support', 'border-surface'],\n accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n success: ['bg-success', 'text-on-success', 'border-surface'],\n alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n danger: ['bg-error', 'text-on-error', 'border-surface'],\n info: ['bg-info', 'text-on-info', 'border-surface'],\n neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n }),\n /**\n * Size of the component.\n * @default 'md'\n */\n size: makeVariants<'size', ['sm', 'md']>({\n sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n }),\n /**\n * Type of the component.\n * @default 'relative'\n */\n type: {\n relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n standalone: [],\n },\n },\n defaultVariants: {\n intent: 'danger',\n size: 'md',\n type: 'relative',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>,\n StylesProps {\n /**\n * Numeric value used as indicator inside the component.\n */\n count?: number\n /**\n * Maximum numeric value to be dispayed as a count value.\n * @default 99\n */\n overflowCount?: number\n /**\n * A custom label for accessibility purposes. It can also be defined as a builder function\n * to handle dynamic inner data to create a custom label.\n */\n 'aria-label'?:\n | string\n | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n /**\n * Describes the way the component is displayed: relative to another element or just standalone.\n * @default 'relative'\n */\n type?: 'relative' | 'standalone'\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n intent = 'danger',\n size = 'md',\n type = 'relative',\n count,\n overflowCount = 99,\n 'aria-label': label,\n className,\n ...others\n}: BadgeItemProps) => {\n const hasOverflow = count && count > overflowCount\n const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n const props = { ...others, 'aria-label': ariaLabel }\n\n return (\n <span\n data-spark-component=\"badge\"\n role=\"status\"\n className={styles({\n intent,\n size,\n type,\n className,\n })}\n {...props}\n >\n {hasOverflow ? `${overflowCount}+` : count}\n </span>\n )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n const isStandalone = !children\n\n return isStandalone ? (\n <BadgeItem type=\"standalone\" {...props} />\n ) : (\n <div className=\"relative inline-flex\">\n {children}\n <BadgeItem {...props} />\n </div>\n )\n}\n\nBadge.displayName = 'Badge'\n"],"names":["styles","cva","makeVariants","BadgeItem","intent","size","type","count","overflowCount","label","className","others","hasOverflow","ariaLabel","props","jsx","Badge","children","jsxs"],"mappings":";;;AAGO,MAAMA,IAASC;AAAA,EACpB,CAAC,qBAAqB,aAAa,yBAAyB,0BAA0B;AAAA,EACtF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR,QAAQC,EAcN;AAAA,QACA,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,QAAQ,CAAC,aAAa,kBAAkB,gBAAgB;AAAA,QACxD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACrD,QAAQ,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACtD,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,MAAA,CACtD;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAMA,EAAmC;AAAA,QACvC,IAAI,CAAC,cAAc,qDAAqD,iBAAiB;AAAA,QACzF,IAAI,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,MAAA,CACvD;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAM;AAAA,QACJ,UAAU,CAAC,8BAA8B,kCAAkC;AAAA,QAC3E,YAAY,CAAA;AAAA,MAAC;AAAA,IACf;AAAA,IAEF,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GC7BaC,IAAY,CAAC;AAAA,EACxB,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAcL,KAASA,IAAQC,GAC/BK,IAAY,OAAOJ,KAAU,aAAaA,EAAM,EAAE,OAAAF,GAAO,eAAAC,EAAA,CAAe,IAAIC,GAC5EK,IAAQ,EAAE,GAAGH,GAAQ,cAAcE,EAAA;AAEzC,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,WAAWf,EAAO;AAAA,QAChB,QAAAI;AAAA,QACA,MAAAC;AAAA,QACA,MAAAC;AAAA,QACA,WAAAI;AAAA,MAAA,CACD;AAAA,MACA,GAAGI;AAAA,MAEH,UAAAF,IAAc,GAAGJ,CAAa,MAAMD;AAAA,IAAA;AAAA,EAAA;AAG3C;AAEAJ,EAAU,cAAc;ACtDjB,MAAMa,IAAQ,CAAC,EAAE,UAAAC,GAAU,GAAGH,QACd,CAACG,IAGpB,gBAAAF,EAACZ,GAAA,EAAU,MAAK,cAAc,GAAGW,EAAA,CAAO,IAExC,gBAAAI,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,EAAAD;AAAA,EACD,gBAAAF,EAACZ,GAAA,EAAW,GAAGW,EAAA,CAAO;AAAA,GACxB;AAIJE,EAAM,cAAc;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
|
+
export interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
|
|
3
|
+
className?: string;
|
|
4
|
+
['aria-label']: string;
|
|
5
|
+
ref?: Ref<HTMLElement>;
|
|
6
|
+
}
|
|
7
|
+
export declare const Breadcrumb: {
|
|
8
|
+
({ className, "aria-label": ariaLabel, ref, ...rest }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
|
+
import { TextLink } from '../text-link';
|
|
3
|
+
export interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {
|
|
4
|
+
asChild?: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
7
|
+
}
|
|
8
|
+
export declare const CurrentPage: {
|
|
9
|
+
({ asChild, className, children, ...rest }: CurrentPageProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
|
+
export interface ItemProps extends ComponentPropsWithoutRef<'li'> {
|
|
3
|
+
className?: string;
|
|
4
|
+
ref?: Ref<HTMLLIElement>;
|
|
5
|
+
}
|
|
6
|
+
export declare const Item: {
|
|
7
|
+
({ className, ...rest }: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
|
+
import { TextLink } from '../text-link';
|
|
3
|
+
export interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
|
|
4
|
+
asChild?: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
href?: string;
|
|
7
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
8
|
+
}
|
|
9
|
+
export declare const Link: {
|
|
10
|
+
({ asChild, className, bold, intent, underline, href, ref, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|