@spark-ui/components 17.9.0-beta.2 → 17.9.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/FormFieldRequiredIndicator-CEB8Ez-q.js.map +1 -1
- package/dist/FormFieldRequiredIndicator-CzdpinIz.mjs.map +1 -1
- package/dist/accordion/AccordionItem.d.ts +3 -0
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/AlertDialogAction.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogBody.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogCancel.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogContent.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogDescription.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogFooter.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogHeader.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogOverlay.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogPortal.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogTitle.d.ts +3 -0
- package/dist/alert-dialog/AlertDialogTrigger.d.ts +3 -0
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/AvatarAction.d.ts +3 -0
- package/dist/avatar/AvatarImage.d.ts +3 -0
- package/dist/avatar/AvatarOnlineBadge.d.ts +3 -0
- package/dist/avatar/AvatarPlaceholder.d.ts +3 -0
- package/dist/avatar/AvatarUser.d.ts +3 -0
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +3 -3
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/BreadcrumbCurrentPage.d.ts +3 -0
- package/dist/breadcrumb/BreadcrumbItem.d.ts +3 -0
- package/dist/breadcrumb/BreadcrumbLink.d.ts +3 -0
- package/dist/breadcrumb/BreadcrumbSeparator.d.ts +3 -0
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/card/Backdrop.d.ts +17 -0
- package/dist/card/Content.d.ts +3 -0
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/CarouselControls.d.ts +3 -0
- package/dist/carousel/CarouselNextButton.d.ts +3 -0
- package/dist/carousel/CarouselPageIndicator.d.ts +3 -0
- package/dist/carousel/CarouselPagePicker.d.ts +3 -0
- package/dist/carousel/CarouselPrevButton.d.ts +3 -0
- package/dist/carousel/CarouselSlide.d.ts +3 -0
- package/dist/carousel/CarouselSlides.d.ts +3 -0
- package/dist/carousel/CarouselViewport.d.ts +3 -0
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/chip/ChipClearButton.d.ts +3 -0
- package/dist/chip/ChipContent.d.ts +3 -0
- package/dist/chip/ChipLeadingIcon.d.ts +3 -0
- package/dist/chip/ChipTrailingIcon.d.ts +3 -0
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs.map +1 -1
- package/dist/circular-meter/CircularMeterContent.d.ts +3 -0
- package/dist/circular-meter/CircularMeterLabel.d.ts +3 -0
- package/dist/circular-meter/CircularMeterTrack.d.ts +3 -0
- package/dist/circular-meter/CircularMeterValue.d.ts +3 -0
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/Content.d.ts +3 -0
- package/dist/collapsible/Trigger.d.ts +3 -0
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/ComboboxClearButton.d.ts +3 -0
- package/dist/combobox/ComboboxDisclosure.d.ts +3 -0
- package/dist/combobox/ComboboxEmpty.d.ts +3 -0
- package/dist/combobox/ComboboxGroup.d.ts +3 -0
- package/dist/combobox/ComboboxInput.d.ts +3 -0
- package/dist/combobox/ComboboxItem.d.ts +3 -0
- package/dist/combobox/ComboboxItemIndicator.d.ts +3 -0
- package/dist/combobox/ComboboxItemText.d.ts +3 -0
- package/dist/combobox/ComboboxItems.d.ts +3 -0
- package/dist/combobox/ComboboxLabel.d.ts +3 -0
- package/dist/combobox/ComboboxLeadingIcon.d.ts +3 -0
- package/dist/combobox/ComboboxPopover.d.ts +3 -0
- package/dist/combobox/ComboboxPortal.d.ts +3 -0
- package/dist/combobox/ComboboxSelectedItems.d.ts +3 -0
- package/dist/combobox/ComboboxTrigger.d.ts +3 -0
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/DialogBody.d.ts +3 -0
- package/dist/dialog/DialogClose.d.ts +3 -0
- package/dist/dialog/DialogContent.d.ts +3 -0
- package/dist/dialog/DialogDescription.d.ts +3 -0
- package/dist/dialog/DialogFooter.d.ts +3 -0
- package/dist/dialog/DialogHeader.d.ts +3 -0
- package/dist/dialog/DialogOverlay.d.ts +3 -0
- package/dist/dialog/DialogPortal.d.ts +3 -0
- package/dist/dialog/DialogTitle.d.ts +3 -0
- package/dist/dialog/DialogTrigger.d.ts +3 -0
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/DividerContent.d.ts +3 -0
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/DrawerBody.d.ts +3 -0
- package/dist/drawer/DrawerClose.d.ts +3 -0
- package/dist/drawer/DrawerCloseButton.d.ts +3 -0
- package/dist/drawer/DrawerContent.d.ts +3 -0
- package/dist/drawer/DrawerDescription.d.ts +3 -0
- package/dist/drawer/DrawerFooter.d.ts +3 -0
- package/dist/drawer/DrawerHeader.d.ts +3 -0
- package/dist/drawer/DrawerOverlay.d.ts +3 -0
- package/dist/drawer/DrawerPortal.d.ts +3 -0
- package/dist/drawer/DrawerTitle.d.ts +3 -0
- package/dist/drawer/DrawerTrigger.d.ts +3 -0
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/DropdownDivider.d.ts +3 -0
- package/dist/dropdown/DropdownGroup.d.ts +3 -0
- package/dist/dropdown/DropdownItem.d.ts +3 -0
- package/dist/dropdown/DropdownItemIndicator.d.ts +3 -0
- package/dist/dropdown/DropdownItemText.d.ts +3 -0
- package/dist/dropdown/DropdownItems.d.ts +3 -0
- package/dist/dropdown/DropdownLabel.d.ts +3 -0
- package/dist/dropdown/DropdownLeadingIcon.d.ts +3 -0
- package/dist/dropdown/DropdownPopover.d.ts +3 -0
- package/dist/dropdown/DropdownPortal.d.ts +3 -0
- package/dist/dropdown/DropdownTrigger.d.ts +3 -0
- package/dist/dropdown/DropdownValue.d.ts +3 -0
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/FileUploadAcceptedFile.d.ts +1 -0
- package/dist/file-upload/FileUploadContext.d.ts +1 -0
- package/dist/file-upload/FileUploadDropzone.d.ts +3 -0
- package/dist/file-upload/FileUploadItemDeleteTrigger.d.ts +3 -0
- package/dist/file-upload/FileUploadPreviewImage.d.ts +1 -0
- package/dist/file-upload/FileUploadRejectedFile.d.ts +1 -0
- package/dist/file-upload/FileUploadRejectedFileDeleteTrigger.d.ts +1 -0
- package/dist/file-upload/FileUploadTrigger.d.ts +3 -0
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field/FormFieldAlertMessage.d.ts +1 -0
- package/dist/form-field/FormFieldCharactersCount.d.ts +1 -0
- package/dist/form-field/FormFieldControl.d.ts +1 -0
- package/dist/form-field/FormFieldErrorMessage.d.ts +1 -0
- package/dist/form-field/FormFieldHelperMessage.d.ts +1 -0
- package/dist/form-field/FormFieldLabel.d.ts +1 -0
- package/dist/form-field/FormFieldRequiredIndicator.d.ts +1 -0
- package/dist/form-field/FormFieldStateMessage.d.ts +3 -0
- package/dist/form-field/FormFieldSuccessMessage.d.ts +1 -0
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/{form-field-CYGgse45.js → form-field-1sKqNg7F.js} +2 -2
- package/dist/form-field-1sKqNg7F.js.map +1 -0
- package/dist/{form-field-CV5dzt-I.mjs → form-field-OhKW7u5I.mjs} +2 -2
- package/dist/form-field-OhKW7u5I.mjs.map +1 -0
- package/dist/input/InputLeadingIcon.d.ts +1 -0
- package/dist/input/InputTrailingIcon.d.ts +1 -0
- package/dist/input-BIuBpTEq.mjs.map +1 -1
- package/dist/input-Cx5cfgE8.js.map +1 -1
- package/dist/input-otp/InputOTPGroup.d.ts +3 -0
- package/dist/input-otp/InputOTPSeparator.d.ts +3 -0
- package/dist/input-otp/InputOTPSlot.d.ts +3 -0
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label/LabelRequiredIndicator.d.ts +3 -0
- package/dist/label-BCSEss4U.js.map +1 -1
- package/dist/label-DDBRKLUX.mjs.map +1 -1
- package/dist/link-box/LinkBoxLink.d.ts +3 -0
- package/dist/link-box/LinkBoxRaised.d.ts +24 -0
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/menu/Menu.d.ts +15 -0
- package/dist/menu/MenuCheckboxItem.d.ts +20 -0
- package/dist/menu/MenuCheckboxItemIndicator.d.ts +25 -0
- package/dist/menu/MenuGroup.d.ts +12 -0
- package/dist/menu/MenuGroupLabel.d.ts +19 -0
- package/dist/menu/MenuItem.d.ts +19 -0
- package/dist/menu/MenuItemStyles.d.ts +5 -0
- package/dist/menu/MenuLinkItem.d.ts +27 -0
- package/dist/menu/MenuPopup.d.ts +19 -0
- package/dist/menu/MenuPortal.d.ts +12 -0
- package/dist/menu/MenuPositioner.d.ts +12 -0
- package/dist/menu/MenuRadioGroup.d.ts +12 -0
- package/dist/menu/MenuRadioItem.d.ts +20 -0
- package/dist/menu/MenuRadioItemIndicator.d.ts +25 -0
- package/dist/menu/MenuSeparator.d.ts +12 -0
- package/dist/menu/MenuSubmenu.d.ts +16 -0
- package/dist/menu/MenuSubmenuContext.d.ts +8 -0
- package/dist/menu/MenuSubmenuTrigger.d.ts +19 -0
- package/dist/menu/MenuTrigger.d.ts +21 -0
- package/dist/menu/index.d.mts +49 -0
- package/dist/menu/index.d.ts +49 -0
- package/dist/menu/index.js +2 -0
- package/dist/menu/index.js.map +1 -0
- package/dist/menu/index.mjs +289 -0
- package/dist/menu/index.mjs.map +1 -0
- package/dist/menu/useRenderSlot.d.ts +1 -0
- package/dist/meter/MeterLabel.d.ts +3 -0
- package/dist/meter/MeterTrack.d.ts +3 -0
- package/dist/meter/MeterValue.d.ts +3 -0
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/PaginationEllipsis.d.ts +3 -0
- package/dist/pagination/PaginationFirstPageTrigger.d.ts +3 -0
- package/dist/pagination/PaginationLastPageTrigger.d.ts +3 -0
- package/dist/pagination/PaginationNextTrigger.d.ts +3 -0
- package/dist/pagination/PaginationPages.d.ts +3 -0
- package/dist/pagination/PaginationPrevTrigger.d.ts +3 -0
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/PopoverAnchor.d.ts +3 -0
- package/dist/popover/PopoverArrow.d.ts +3 -0
- package/dist/popover/PopoverCloseButton.d.ts +3 -0
- package/dist/popover/PopoverContent.d.ts +3 -0
- package/dist/popover/PopoverHeader.d.ts +3 -0
- package/dist/popover/PopoverPortal.d.ts +3 -0
- package/dist/popover/PopoverTrigger.d.ts +3 -0
- package/dist/popover-DKa4WOQV.mjs.map +1 -1
- package/dist/popover-ayPbAw59.js.map +1 -1
- package/dist/progress/ProgressLabel.d.ts +3 -0
- package/dist/progress/ProgressTrack.d.ts +1 -0
- package/dist/progress/ProgressValue.d.ts +1 -0
- package/dist/progress-C-Zs94G2.mjs.map +1 -1
- package/dist/progress-DaQt4olK.js.map +1 -1
- package/dist/progress-tracker/ProgressTrackerStep.d.ts +1 -0
- package/dist/progress-tracker/ProgressTrackerStepIndicator.d.ts +1 -0
- package/dist/progress-tracker/ProgressTrackerStepLabel.d.ts +1 -0
- package/dist/progress-tracker/index.js +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +2 -2
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/Radio.d.ts +3 -0
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs +2 -2
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/RatingDisplayCount.d.ts +1 -0
- package/dist/rating-display/RatingDisplayStars.d.ts +1 -0
- package/dist/rating-display/RatingDisplayValue.d.ts +1 -0
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs +4 -4
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/ScrollingListControls.d.ts +1 -0
- package/dist/scrolling-list/ScrollingListItem.d.ts +1 -0
- package/dist/scrolling-list/ScrollingListItems.d.ts +1 -0
- package/dist/scrolling-list/ScrollingListNextButton.d.ts +1 -0
- package/dist/scrolling-list/ScrollingListPrevButton.d.ts +1 -0
- package/dist/scrolling-list/ScrollingListSkipButton.d.ts +1 -0
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/SegmentedControlIndicator.d.ts +1 -0
- package/dist/segmented-control/SegmentedControlItem.d.ts +1 -0
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs.map +1 -1
- package/dist/segmented-gauge/SegmentedGaugeLabel.d.ts +1 -0
- package/dist/segmented-gauge/SegmentedGaugeSegment.d.ts +3 -0
- package/dist/segmented-gauge/SegmentedGaugeTrack.d.ts +1 -0
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/SelectGroup.d.ts +3 -0
- package/dist/select/SelectItem.d.ts +3 -0
- package/dist/select/SelectItems.d.ts +3 -0
- package/dist/select/SelectLabel.d.ts +3 -0
- package/dist/select/SelectLeadingIcon.d.ts +3 -0
- package/dist/select/SelectPlaceholder.d.ts +3 -0
- package/dist/select/SelectTrigger.d.ts +3 -0
- package/dist/select/SelectValue.d.ts +3 -0
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/SkeletonItem.d.ts +3 -0
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/SliderControl.d.ts +1 -0
- package/dist/slider/SliderIndicator.d.ts +1 -0
- package/dist/slider/SliderLabel.d.ts +1 -0
- package/dist/slider/SliderMaxValue.d.ts +1 -0
- package/dist/slider/SliderMinValue.d.ts +1 -0
- package/dist/slider/SliderThumb.d.ts +1 -0
- package/dist/slider/SliderTrack.d.ts +1 -0
- package/dist/slider/SliderValue.d.ts +1 -3
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/table/TableBody.d.ts +1 -0
- package/dist/table/TableBulkBar.d.ts +15 -0
- package/dist/table/TableCell.d.ts +1 -0
- package/dist/table/TableColumn.d.ts +1 -0
- package/dist/table/TableHeader.d.ts +1 -0
- package/dist/table/TableRow.d.ts +1 -0
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/TabsContent.d.ts +1 -0
- package/dist/tabs/TabsList.d.ts +1 -0
- package/dist/tabs/TabsTrigger.d.ts +1 -0
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +1 -1
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/TextareaClearButton.d.ts +1 -0
- package/dist/textarea/TextareaLeadingIcon.d.ts +1 -0
- package/dist/textarea/TextareaTrailingIcon.d.ts +1 -0
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/package.json +5 -5
- package/dist/form-field-CV5dzt-I.mjs.map +0 -1
- package/dist/form-field-CYGgse45.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldRequiredIndicator-CEB8Ez-q.js","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"FormFieldRequiredIndicator-CEB8Ez-q.js","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\n/** An indicator shown when the form field is required. Renders a <span> element. */\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":"+IAUA,IAAa,GAA8B,CACzC,YACA,MACA,GAAG,MAEI,EAAA,EAAA,KAAC,EAAA,EAAM,kBAAP,CAA8B,MAAK,WAAA,EAAA,EAAA,IAAc,QAAS,EAAU,CAAE,GAAI,EAAS,CAAA,CAG5F,EAA2B,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldRequiredIndicator-CzdpinIz.mjs","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"FormFieldRequiredIndicator-CzdpinIz.mjs","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\n/** An indicator shown when the form field is required. Renders a <span> element. */\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":";;;;AAUA,IAAa,KAA8B,EACzC,cACA,QACA,GAAG,QAEI,kBAAC,EAAM,mBAAP;CAA8B;CAAK,WAAW,EAAG,SAAS,EAAU;CAAE,GAAI;CAAS,CAAA;AAG5F,EAA2B,cAAc"}
|
|
@@ -5,6 +5,9 @@ export interface AccordionItemProps extends ExtentedZagInterface {
|
|
|
5
5
|
asChild?: boolean;
|
|
6
6
|
ref?: Ref<HTMLDivElement>;
|
|
7
7
|
}
|
|
8
|
+
/**
|
|
9
|
+
* Groups an accordion header with the corresponding panel. Renders a <div> element.
|
|
10
|
+
*/
|
|
8
11
|
export declare const Item: {
|
|
9
12
|
({ asChild, className, children, ref, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
|
|
10
13
|
displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n multiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"2VAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCoBhE,IAAM,GAAA,EAAA,EAAA,eAEI,KAAK,CAEF,GAAa,CACxB,UAAU,GACV,WACA,SAAS,WACT,mBAAmB,GACnB,WAAW,GACX,YACA,MACA,GAAG,KACiB,CACpB,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,SAAQ,WAC1C,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACE,uBAAqB,YAChB,MACK,WACQ,mBAClB,WAAA,EAAA,EAAA,IAAc,8BAA+B,EAAU,CACvD,OAAQ,EACR,GAAI,EAEH,WACkB,CAAA,CACK,CAAA,EAIhC,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GCrDI,GAAQ,CACnB,UAAU,GACV,YACA,WACA,MACA,GAAG,KACqB,CACxB,IAAM,EAAY,GAAqB,CAEjC,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACO,MACL,uBAAqB,iBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,gDACA,sBACA,CAAE,2BAA4B,EAAU,SAAW,WAAY,CAC/D,EACD,CACD,GAAI,EAEH,WACkB,CAAA,EAIzB,EAAK,YAAc,iBC9BnB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,MAAf,CACO,MACL,uBAAqB,yBACrB,WAAA,EAAA,EAAA,IACE,wCACA,kHACA,8BACA,EACD,CACD,OAAQ,EACR,GAAI,EAEH,WACmB,CAAA,EAI1B,EAAY,YAAc,wBC9B1B,IAAa,GAAc,CACzB,UAAU,GACV,WACA,YACA,UAKE,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACO,MACL,uBAAqB,wBACrB,WAAA,EAAA,EAAA,IAAc,oBAAqB,EAAU,CAE5C,WACS,CAAA,CAIhB,EAAW,YAAc,uBCdzB,IAAa,GAAe,CAC1B,UAAU,GACV,WACA,YACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,MAAC,EAAA,UAAc,QAAf,CACO,MACL,uBAAqB,yBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,QACA,gEACA,+GACA,4DACA,8EACA,oEACA,EACD,CACD,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gCAAiC,WAAe,CAAA,EAC/D,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,OAAO,UACP,WAAA,EAAA,EAAA,IACE,uEACA,qCACD,CACD,KAAK,eAEL,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAClB,CAAA,CACe,IAI5B,EAAY,YAAc,wBC9C1B,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,aACA,cACA,cACD,CAAC,CAEF,EAAU,YAAc,YACxB,EAAK,YAAc,OACnB,EAAW,YAAc,aACzB,EAAY,YAAc,oBAC1B,EAAY,YAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n multiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\n */\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"2VAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCoBhE,IAAM,GAAA,EAAA,EAAA,eAEI,KAAK,CAEF,GAAa,CACxB,UAAU,GACV,WACA,SAAS,WACT,mBAAmB,GACnB,WAAW,GACX,YACA,MACA,GAAG,KACiB,CACpB,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,SAAQ,WAC1C,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACE,uBAAqB,YAChB,MACK,WACQ,mBAClB,WAAA,EAAA,EAAA,IAAc,8BAA+B,EAAU,CACvD,OAAQ,EACR,GAAI,EAEH,WACkB,CAAA,CACK,CAAA,EAIhC,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GClDI,GAAQ,CACnB,UAAU,GACV,YACA,WACA,MACA,GAAG,KACqB,CACxB,IAAM,EAAY,GAAqB,CAEjC,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACO,MACL,uBAAqB,iBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,gDACA,sBACA,CAAE,2BAA4B,EAAU,SAAW,WAAY,CAC/D,EACD,CACD,GAAI,EAEH,WACkB,CAAA,EAIzB,EAAK,YAAc,iBCjCnB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,MAAf,CACO,MACL,uBAAqB,yBACrB,WAAA,EAAA,EAAA,IACE,wCACA,kHACA,8BACA,EACD,CACD,OAAQ,EACR,GAAI,EAEH,WACmB,CAAA,EAI1B,EAAY,YAAc,wBC9B1B,IAAa,GAAc,CACzB,UAAU,GACV,WACA,YACA,UAKE,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACO,MACL,uBAAqB,wBACrB,WAAA,EAAA,EAAA,IAAc,oBAAqB,EAAU,CAE5C,WACS,CAAA,CAIhB,EAAW,YAAc,uBCdzB,IAAa,GAAe,CAC1B,UAAU,GACV,WACA,YACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,MAAC,EAAA,UAAc,QAAf,CACO,MACL,uBAAqB,yBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,QACA,gEACA,+GACA,4DACA,8EACA,oEACA,EACD,CACD,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gCAAiC,WAAe,CAAA,EAC/D,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,OAAO,UACP,WAAA,EAAA,EAAA,IACE,uEACA,qCACD,CACD,KAAK,eAEL,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAClB,CAAA,CACe,IAI5B,EAAY,YAAc,wBC9C1B,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,aACA,cACA,cACD,CAAC,CAEF,EAAU,YAAc,YACxB,EAAK,YAAc,OACnB,EAAW,YAAc,aACzB,EAAY,YAAc,oBAC1B,EAAY,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n multiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":";;;;;;;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;AAEnC,QAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,GAAG,KAAA;;;;ACoBhE,IAAM,IAAmB,EAEf,KAAK,EAEF,KAAa,EACxB,aAAU,IACV,aACA,YAAS,YACT,sBAAmB,IACnB,cAAW,IACX,cACA,QACA,GAAG,QACiB;CACpB,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO,EAAE,WAAQ;YAC1C,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACR,GAAI;GAEH;GACkB,CAAA;EACK,CAAA;;AAIhC,EAAU,cAAc;AAExB,IAAa,UAA4B;CACvC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,+DAA+D;AAG7E,QAAO;GCrDI,KAAQ,EACnB,aAAU,IACV,cACA,aACA,QACA,GAAG,QACqB;CACxB,IAAM,IAAY,GAAqB,EAEjC,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,MAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,iDACA,uBACA,EAAE,4BAA4B,EAAU,WAAW,YAAY,EAC/D,EACD;EACD,GAAI;EAEH;EACkB,CAAA;;AAIzB,EAAK,cAAc;;;AC9BnB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,OAAf;EACO;EACL,wBAAqB;EACrB,WAAW,EACT,yCACA,mHACA,+BACA,EACD;EACD,QAAQ;EACR,GAAI;EAEH;EACmB,CAAA;;AAI1B,EAAY,cAAc;;;AC9B1B,IAAa,KAAc,EACzB,aAAU,IACV,aACA,cACA,aAKE,kBAHgB,IAAU,IAAO,MAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,qBAAqB,EAAU;CAE5C;CACS,CAAA;AAIhB,EAAW,cAAc;;;ACdzB,IAAa,KAAe,EAC1B,aAAU,IACV,aACA,cACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,SAAS;AAEnD,QACE,kBAAC,EAAc,SAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,SACA,iEACA,gHACA,6DACA,+EACA,qEACA,EACD;EACD,GAAI;YAbN,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,EAC/D,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,EACT,wEACA,qCACD;GACD,MAAK;aAEL,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA,CACe;;;AAI5B,EAAY,cAAc;;;AC9C1B,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAU,cAAc,aACxB,EAAK,cAAc,QACnB,EAAW,cAAc,cACzB,EAAY,cAAc,qBAC1B,EAAY,cAAc"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n multiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\n */\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":";;;;;;;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;AAEnC,QAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,GAAG,KAAA;;;;ACoBhE,IAAM,IAAmB,EAEf,KAAK,EAEF,KAAa,EACxB,aAAU,IACV,aACA,YAAS,YACT,sBAAmB,IACnB,cAAW,IACX,cACA,QACA,GAAG,QACiB;CACpB,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO,EAAE,WAAQ;YAC1C,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACR,GAAI;GAEH;GACkB,CAAA;EACK,CAAA;;AAIhC,EAAU,cAAc;AAExB,IAAa,UAA4B;CACvC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,+DAA+D;AAG7E,QAAO;GClDI,KAAQ,EACnB,aAAU,IACV,cACA,aACA,QACA,GAAG,QACqB;CACxB,IAAM,IAAY,GAAqB,EAEjC,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,MAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,iDACA,uBACA,EAAE,4BAA4B,EAAU,WAAW,YAAY,EAC/D,EACD;EACD,GAAI;EAEH;EACkB,CAAA;;AAIzB,EAAK,cAAc;;;ACjCnB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,OAAf;EACO;EACL,wBAAqB;EACrB,WAAW,EACT,yCACA,mHACA,+BACA,EACD;EACD,QAAQ;EACR,GAAI;EAEH;EACmB,CAAA;;AAI1B,EAAY,cAAc;;;AC9B1B,IAAa,KAAc,EACzB,aAAU,IACV,aACA,cACA,aAKE,kBAHgB,IAAU,IAAO,MAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,qBAAqB,EAAU;CAE5C;CACS,CAAA;AAIhB,EAAW,cAAc;;;ACdzB,IAAa,KAAe,EAC1B,aAAU,IACV,aACA,cACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,SAAS;AAEnD,QACE,kBAAC,EAAc,SAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,SACA,iEACA,gHACA,6DACA,+EACA,qEACA,EACD;EACD,GAAI;YAbN,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,EAC/D,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,EACT,wEACA,qCACD;GACD,MAAK;aAEL,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA,CACe;;;AAI5B,EAAY,cAAc;;;AC9C1B,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAU,cAAc,aACxB,EAAK,cAAc,QACnB,EAAW,cAAc,cACzB,EAAY,cAAc,qBAC1B,EAAY,cAAc"}
|
|
@@ -7,6 +7,9 @@ export interface AlertDialogActionProps extends Omit<ComponentProps<typeof BaseA
|
|
|
7
7
|
asChild?: boolean;
|
|
8
8
|
ref?: Ref<HTMLButtonElement>;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* A button that closes the dialog and confirms the action. Renders a <button> element.
|
|
12
|
+
*/
|
|
10
13
|
export declare const AlertDialogAction: {
|
|
11
14
|
({ asChild, ...props }: AlertDialogActionProps): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
displayName: string;
|
|
@@ -6,6 +6,9 @@ export interface AlertDialogBodyProps {
|
|
|
6
6
|
ref?: Ref<HTMLDivElement>;
|
|
7
7
|
inset?: boolean;
|
|
8
8
|
}
|
|
9
|
+
/**
|
|
10
|
+
* The scrollable body section of the alert dialog. Renders a <div> element.
|
|
11
|
+
*/
|
|
9
12
|
export declare const AlertDialogBody: {
|
|
10
13
|
({ children, className, inset, ref: forwardedRef, ...rest }: AlertDialogBodyProps): ReactElement;
|
|
11
14
|
displayName: string;
|
|
@@ -7,6 +7,9 @@ export interface AlertDialogCancelProps extends Omit<ComponentProps<typeof BaseA
|
|
|
7
7
|
asChild?: boolean;
|
|
8
8
|
ref?: Ref<HTMLButtonElement>;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* A button that closes the dialog without confirming the action. Renders a <button> element.
|
|
12
|
+
*/
|
|
10
13
|
export declare const AlertDialogCancel: {
|
|
11
14
|
({ asChild, ref: forwardedRef, ...props }: AlertDialogCancelProps): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
displayName: string;
|
|
@@ -3,6 +3,9 @@ import { ComponentProps, Ref } from 'react';
|
|
|
3
3
|
export interface AlertDialogContentProps extends Omit<ComponentProps<typeof BaseAlertDialog.Popup>, 'render'> {
|
|
4
4
|
ref?: Ref<HTMLDivElement>;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* The popup element that contains the alert dialog content. Renders a <div> element.
|
|
8
|
+
*/
|
|
6
9
|
export declare const AlertDialogContent: {
|
|
7
10
|
({ className, ref, initialFocus, ...others }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
displayName: string;
|
|
@@ -3,6 +3,9 @@ import { ComponentProps, Ref } from 'react';
|
|
|
3
3
|
export interface AlertDialogDescriptionProps extends Omit<ComponentProps<typeof BaseAlertDialog.Description>, 'render'> {
|
|
4
4
|
ref?: Ref<HTMLParagraphElement>;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* A paragraph with additional information about the dialog. Renders a <p> element.
|
|
8
|
+
*/
|
|
6
9
|
export declare const AlertDialogDescription: {
|
|
7
10
|
(props: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
displayName: string;
|
|
@@ -4,6 +4,9 @@ export interface AlertDialogFooterProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
ref?: Ref<HTMLDivElement>;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.
|
|
9
|
+
*/
|
|
7
10
|
export declare const AlertDialogFooter: {
|
|
8
11
|
({ children, className, ref, ...rest }: AlertDialogFooterProps): ReactElement;
|
|
9
12
|
displayName: string;
|
|
@@ -4,6 +4,9 @@ export interface AlertDialogHeaderProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
ref?: Ref<HTMLDivElement>;
|
|
6
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* The header section of the alert dialog. Renders a <header> element.
|
|
9
|
+
*/
|
|
7
10
|
export declare const AlertDialogHeader: {
|
|
8
11
|
({ children, className, ref, ...rest }: AlertDialogHeaderProps): ReactElement;
|
|
9
12
|
displayName: string;
|
|
@@ -3,6 +3,9 @@ import { ComponentProps, Ref } from 'react';
|
|
|
3
3
|
export interface AlertDialogOverlayProps extends Omit<ComponentProps<typeof BaseAlertDialog.Backdrop>, 'render'> {
|
|
4
4
|
ref?: Ref<HTMLDivElement>;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* The backdrop element that dims the rest of the page. Renders a <div> element.
|
|
8
|
+
*/
|
|
6
9
|
export declare const AlertDialogOverlay: {
|
|
7
10
|
({ className, ...props }: AlertDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
displayName: string;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
3
|
export type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>;
|
|
4
|
+
/**
|
|
5
|
+
* A portal that renders the dialog in a different part of the DOM. Renders a <div> element.
|
|
6
|
+
*/
|
|
4
7
|
export declare const AlertDialogPortal: {
|
|
5
8
|
({ className, ...props }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
|
|
6
9
|
displayName: string;
|
|
@@ -3,6 +3,9 @@ import { ComponentProps, Ref } from 'react';
|
|
|
3
3
|
export interface AlertDialogTitleProps extends Omit<ComponentProps<typeof BaseAlertDialog.Title>, 'render'> {
|
|
4
4
|
ref?: Ref<HTMLHeadingElement>;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* The title of the alert dialog, announced to assistive technology. Renders an <h2> element.
|
|
8
|
+
*/
|
|
6
9
|
export declare const AlertDialogTitle: {
|
|
7
10
|
({ className, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
displayName: string;
|
|
@@ -7,6 +7,9 @@ export interface AlertDialogTriggerProps extends Omit<ComponentProps<typeof Base
|
|
|
7
7
|
asChild?: boolean;
|
|
8
8
|
ref?: Ref<HTMLButtonElement>;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* A button that opens the alert dialog. Renders a <button> element.
|
|
12
|
+
*/
|
|
10
13
|
export declare const AlertDialogTrigger: {
|
|
11
14
|
({ asChild, ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
12
15
|
displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n children,\n withFade = false,\n cancelRef,\n}: {\n children: ReactNode\n withFade?: boolean\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n return (\n <AlertDialogContext.Provider\n value={{\n cancelRef,\n withFade,\n }}\n >\n {children}\n </AlertDialogContext.Provider>\n )\n}\n\nexport const useAlertDialog = () => {\n const context = useContext(AlertDialogContext)\n\n if (!context) {\n throw Error('useAlertDialog must be used within an AlertDialog provider')\n }\n\n return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Root>,\n 'onOpenChange' | 'render'\n> {\n /**\n * Specifies if the dialog is open or not.\n */\n open?: boolean\n /**\n * Default open state.\n */\n defaultOpen?: boolean\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n const handleOpenChange = onOpenChange\n ? (open: boolean, _eventDetails: unknown) => {\n onOpenChange(open)\n }\n : undefined\n\n return (\n <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n <BaseAlertDialog.Root\n data-spark-component=\"alert-dialog\"\n onOpenChange={handleOpenChange}\n {...props}\n />\n </AlertDialogProvider>\n )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n data-spark-component=\"alert-dialog-action\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: AlertDialogBodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useAlertDialog()\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"alert-dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n asChild = false,\n ref: forwardedRef,\n ...props\n}: AlertDialogCancelProps) => {\n const { cancelRef } = useAlertDialog()\n const ref = useMergeRefs(forwardedRef, cancelRef)\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n ref={ref}\n data-spark-component=\"alert-dialog-cancel\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Popup>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n className,\n ref,\n initialFocus,\n ...others\n}: AlertDialogContentProps) => {\n const { cancelRef } = useAlertDialog()\n\n // Default: focus the cancel button when dialog opens\n // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n return (\n <BaseAlertDialog.Popup\n ref={ref}\n data-spark-component=\"alert-dialog-content\"\n role=\"alertdialog\"\n className={state =>\n cx(\n dialogContentStyles({ size: 'md', isNarrow: true }),\n 'min-w-[min(288px,calc(100vw-2rem))]',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n // Transition with opacity and scale for smooth open/close animations\n 'transition-all duration-150',\n 'data-starting-style:scale-90 data-starting-style:opacity-0',\n 'data-ending-style:scale-90 data-ending-style:opacity-0',\n typeof className === 'function' ? className(state) : className\n )\n }\n initialFocus={handleInitialFocus}\n {...others}\n />\n )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Description>,\n 'render'\n> {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogFooterProps): ReactElement => (\n <footer\n data-spark-component=\"alert-dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n <header\n data-spark-component=\"alert-dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Backdrop>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n return (\n <BaseAlertDialog.Backdrop\n data-spark-component=\"alert-dialog-overlay\"\n className={state =>\n cx(\n 'z-overlay fixed top-0 left-0 h-screen w-screen',\n 'bg-overlay/dim-1',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n 'data-starting-style:animate-fade-in',\n 'data-ending-style:animate-fade-out',\n typeof className === 'function' ? className(state) : className\n )\n }\n {...props}\n />\n )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n return (\n <BaseAlertDialog.Portal\n data-spark-component=\"alert-dialog-portal\"\n className={cx(className, 'z-modal absolute')}\n {...props}\n />\n )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Title>,\n 'render'\n> {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n return (\n <BaseAlertDialog.Title\n data-spark-component=\"alert-dialog-title\"\n className={cx('text-headline-1 text-on-surface', className)}\n {...props}\n />\n )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Trigger>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Trigger\n data-spark-component=\"alert-dialog-trigger\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n Action: typeof AlertDialogAction\n Body: typeof AlertDialogBody\n Cancel: typeof AlertDialogCancel\n Content: typeof AlertDialogContent\n Description: typeof AlertDialogDescription\n Footer: typeof AlertDialogFooter\n Header: typeof AlertDialogHeader\n Overlay: typeof AlertDialogOverlay\n Portal: typeof AlertDialogPortal\n Title: typeof AlertDialogTitle\n Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n Action: AlertDialogAction,\n Body: AlertDialogBody,\n Cancel: AlertDialogCancel,\n Content: AlertDialogContent,\n Description: AlertDialogDescription,\n Footer: AlertDialogFooter,\n Header: AlertDialogHeader,\n Overlay: AlertDialogOverlay,\n Portal: AlertDialogPortal,\n Title: AlertDialogTitle,\n Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"0ZAOA,IAAa,GAAA,EAAA,EAAA,eAAmE,KAAK,CAExE,GAAuB,CAClC,WACA,WAAW,GACX,gBAOE,EAAA,EAAA,KAAC,EAAmB,SAApB,CACE,MAAO,CACL,YACA,WACD,CAEA,WAC2B,CAAA,CAIrB,MAAuB,CAClC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAmB,CAE9C,GAAI,CAAC,EACH,MAAM,MAAM,6DAA6D,CAG3E,OAAO,GCLI,GAAe,CAAE,eAAc,WAAW,GAAO,GAAG,KAA8B,CAC7F,IAAM,GAAA,EAAA,EAAA,QAA6C,KAAK,CAElD,EAAmB,GACpB,EAAe,IAA2B,CACzC,EAAa,EAAK,EAEpB,IAAA,GAEJ,OACE,EAAA,EAAA,KAAC,EAAD,CAA+B,WAAqB,sBAClD,EAAA,EAAA,KAAC,EAAA,YAAgB,KAAjB,CACE,uBAAqB,eACrB,aAAc,EACd,GAAI,EACJ,CAAA,CACkB,CAAA,EAI1B,EAAY,YAAc,cClD1B,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCWhE,IAAa,GAAqB,CAAE,UAAU,GAAO,GAAG,KAAoC,CAC1F,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACE,uBAAqB,sBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAkB,YAAc,qBCbhC,IAAa,GAAmB,CAC9B,WACA,YACA,QAAQ,GACR,IAAK,EACL,GAAG,KACqC,CACxC,IAAM,GAAA,EAAA,EAAA,QAAuC,KAAK,CAC5C,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAc,CAE/C,CAAE,YAAa,GAAgB,CAC/B,CAAE,aAAA,EAAA,EAAA,mBAA+B,EAAc,CAErD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,oBAChB,MACL,WAAA,EAAA,EAAA,IACE,uEACA,8BACA,CACG,cAAgB,CAAC,EACnB,CACD,EACD,CACD,MAAO,CACL,GAAI,GAAY,CACd,UACE,4HACF,SAAU,oBAAoB,EAAS,IAAM,MAAQ,OAAO,KAAK,EAAS,OAAS,MAAQ,OAAO,GAClG,aAAc,KAAK,EAAS,IAAM,MAAQ,UAC3C,CACF,CACD,GAAI,EAEH,WACG,CAAA,EAIV,EAAgB,YAAc,mBCrC9B,IAAa,GAAqB,CAChC,UAAU,GACV,IAAK,EACL,GAAG,KACyB,CAC5B,GAAM,CAAE,aAAc,GAAgB,CAChC,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAU,CAC3C,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACO,MACL,uBAAqB,sBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAkB,YAAc,qBCvBhC,IAAa,GAAsB,CACjC,YACA,MACA,eACA,GAAG,KAC0B,CAC7B,GAAM,CAAE,aAAc,GAAgB,CAIhC,EAAqB,IAAiB,IAAA,OAAiC,EAAU,QAA/B,EAExD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACO,MACL,uBAAqB,uBACrB,KAAK,cACL,UAAW,IAAA,EAAA,EAAA,IAEP,EAAA,EAAoB,CAAE,KAAM,KAAM,SAAU,GAAM,CAAC,CACnD,sCAGA,8BACA,6DACA,yDACA,OAAO,GAAc,WAAa,EAAU,EAAM,CAAG,EACtD,CAEH,aAAc,EACd,GAAI,EACJ,CAAA,EAIN,EAAmB,YAAc,sBCvCjC,IAAa,EAA0B,IAC9B,EAAA,EAAA,KAAC,EAAA,YAAgB,YAAjB,CAA6B,uBAAqB,2BAA2B,GAAI,EAAS,CAAA,CAGnG,EAAuB,YAAc,0BCLrC,IAAa,GAAqB,CAChC,WACA,YACA,MACA,GAAG,MAEH,EAAA,EAAA,KAAC,SAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,IAAc,EAAW,CAAC,QAAS,QAAQ,CAAC,CAC5C,GAAI,EAEH,WACM,CAAA,CAGX,EAAkB,YAAc,qBChBhC,IAAa,GAAqB,CAChC,WACA,YACA,MACA,GAAG,MAEH,EAAA,EAAA,KAAC,SAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,IAAc,EAAW,CAAC,QAAS,QAAQ,CAAC,CAC5C,GAAI,EAEH,WACM,CAAA,CAGX,EAAkB,YAAc,qBCdhC,IAAa,GAAsB,CAAE,YAAW,GAAG,MAE/C,EAAA,EAAA,KAAC,EAAA,YAAgB,SAAjB,CACE,uBAAqB,uBACrB,UAAW,IAAA,EAAA,EAAA,IAEP,iDACA,mBAEA,sCACA,qCACA,OAAO,GAAc,WAAa,EAAU,EAAM,CAAG,EACtD,CAEH,GAAI,EACJ,CAAA,CAIN,EAAmB,YAAc,sBCxBjC,IAAa,GAAqB,CAAE,YAAW,GAAG,MAE9C,EAAA,EAAA,KAAC,EAAA,YAAgB,OAAjB,CACE,uBAAqB,sBACrB,WAAA,EAAA,EAAA,IAAc,EAAW,mBAAmB,CAC5C,GAAI,EACJ,CAAA,CAIN,EAAkB,YAAc,qBCLhC,IAAa,GAAoB,CAAE,YAAW,GAAG,MAE7C,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACE,uBAAqB,qBACrB,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,EACJ,CAAA,CAIN,EAAiB,YAAc,oBCL/B,IAAa,GAAsB,CAAE,UAAU,GAAO,GAAG,KAAqC,CAC5F,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,QAAjB,CACE,uBAAqB,uBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAmB,YAAc,sBCEjC,IAAa,EAYT,OAAO,OAAO,EAAM,CACtB,OAAQ,EACR,KAAM,EACN,OAAQ,EACR,QAAS,EACT,YAAa,EACb,OAAQ,EACR,OAAQ,EACR,QAAS,EACT,OAAQ,EACR,MAAO,EACP,QAAS,EACV,CAAC,CAEF,EAAY,YAAc,cAC1B,EAAY,OAAO,YAAc,qBACjC,EAAY,KAAK,YAAc,mBAC/B,EAAY,OAAO,YAAc,qBACjC,EAAY,QAAQ,YAAc,sBAClC,EAAY,YAAY,YAAc,0BACtC,EAAY,OAAO,YAAc,qBACjC,EAAY,OAAO,YAAc,qBACjC,EAAY,QAAQ,YAAc,sBAClC,EAAY,OAAO,YAAc,qBACjC,EAAY,MAAM,YAAc,oBAChC,EAAY,QAAQ,YAAc"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n children,\n withFade = false,\n cancelRef,\n}: {\n children: ReactNode\n withFade?: boolean\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n return (\n <AlertDialogContext.Provider\n value={{\n cancelRef,\n withFade,\n }}\n >\n {children}\n </AlertDialogContext.Provider>\n )\n}\n\nexport const useAlertDialog = () => {\n const context = useContext(AlertDialogContext)\n\n if (!context) {\n throw Error('useAlertDialog must be used within an AlertDialog provider')\n }\n\n return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Root>,\n 'onOpenChange' | 'render'\n> {\n /**\n * Specifies if the dialog is open or not.\n */\n open?: boolean\n /**\n * Default open state.\n */\n defaultOpen?: boolean\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n const handleOpenChange = onOpenChange\n ? (open: boolean, _eventDetails: unknown) => {\n onOpenChange(open)\n }\n : undefined\n\n return (\n <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n <BaseAlertDialog.Root\n data-spark-component=\"alert-dialog\"\n onOpenChange={handleOpenChange}\n {...props}\n />\n </AlertDialogProvider>\n )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\n */\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n data-spark-component=\"alert-dialog-action\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\n */\nexport const AlertDialogBody = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: AlertDialogBodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useAlertDialog()\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"alert-dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\n */\nexport const AlertDialogCancel = ({\n asChild = false,\n ref: forwardedRef,\n ...props\n}: AlertDialogCancelProps) => {\n const { cancelRef } = useAlertDialog()\n const ref = useMergeRefs(forwardedRef, cancelRef)\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n ref={ref}\n data-spark-component=\"alert-dialog-cancel\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Popup>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\n */\nexport const AlertDialogContent = ({\n className,\n ref,\n initialFocus,\n ...others\n}: AlertDialogContentProps) => {\n const { cancelRef } = useAlertDialog()\n\n // Default: focus the cancel button when dialog opens\n // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n return (\n <BaseAlertDialog.Popup\n ref={ref}\n data-spark-component=\"alert-dialog-content\"\n role=\"alertdialog\"\n className={state =>\n cx(\n dialogContentStyles({ size: 'md', isNarrow: true }),\n 'min-w-[min(288px,calc(100vw-2rem))]',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n // Transition with opacity and scale for smooth open/close animations\n 'transition-all duration-150',\n 'data-starting-style:scale-90 data-starting-style:opacity-0',\n 'data-ending-style:scale-90 data-ending-style:opacity-0',\n typeof className === 'function' ? className(state) : className\n )\n }\n initialFocus={handleInitialFocus}\n {...others}\n />\n )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Description>,\n 'render'\n> {\n ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const AlertDialogFooter = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogFooterProps): ReactElement => (\n <footer\n data-spark-component=\"alert-dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the alert dialog. Renders a <header> element.\n */\nexport const AlertDialogHeader = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n <header\n data-spark-component=\"alert-dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Backdrop>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n return (\n <BaseAlertDialog.Backdrop\n data-spark-component=\"alert-dialog-overlay\"\n className={state =>\n cx(\n 'z-overlay fixed top-0 left-0 h-screen w-screen',\n 'bg-overlay/dim-1',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n 'data-starting-style:animate-fade-in',\n 'data-ending-style:animate-fade-out',\n typeof className === 'function' ? className(state) : className\n )\n }\n {...props}\n />\n )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n return (\n <BaseAlertDialog.Portal\n data-spark-component=\"alert-dialog-portal\"\n className={cx(className, 'z-modal absolute')}\n {...props}\n />\n )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Title>,\n 'render'\n> {\n ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n return (\n <BaseAlertDialog.Title\n data-spark-component=\"alert-dialog-title\"\n className={cx('text-headline-1 text-on-surface', className)}\n {...props}\n />\n )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Trigger>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the alert dialog. Renders a <button> element.\n */\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Trigger\n data-spark-component=\"alert-dialog-trigger\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n Action: typeof AlertDialogAction\n Body: typeof AlertDialogBody\n Cancel: typeof AlertDialogCancel\n Content: typeof AlertDialogContent\n Description: typeof AlertDialogDescription\n Footer: typeof AlertDialogFooter\n Header: typeof AlertDialogHeader\n Overlay: typeof AlertDialogOverlay\n Portal: typeof AlertDialogPortal\n Title: typeof AlertDialogTitle\n Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n Action: AlertDialogAction,\n Body: AlertDialogBody,\n Cancel: AlertDialogCancel,\n Content: AlertDialogContent,\n Description: AlertDialogDescription,\n Footer: AlertDialogFooter,\n Header: AlertDialogHeader,\n Overlay: AlertDialogOverlay,\n Portal: AlertDialogPortal,\n Title: AlertDialogTitle,\n Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"0ZAOA,IAAa,GAAA,EAAA,EAAA,eAAmE,KAAK,CAExE,GAAuB,CAClC,WACA,WAAW,GACX,gBAOE,EAAA,EAAA,KAAC,EAAmB,SAApB,CACE,MAAO,CACL,YACA,WACD,CAEA,WAC2B,CAAA,CAIrB,MAAuB,CAClC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAmB,CAE9C,GAAI,CAAC,EACH,MAAM,MAAM,6DAA6D,CAG3E,OAAO,GCLI,GAAe,CAAE,eAAc,WAAW,GAAO,GAAG,KAA8B,CAC7F,IAAM,GAAA,EAAA,EAAA,QAA6C,KAAK,CAElD,EAAmB,GACpB,EAAe,IAA2B,CACzC,EAAa,EAAK,EAEpB,IAAA,GAEJ,OACE,EAAA,EAAA,KAAC,EAAD,CAA+B,WAAqB,sBAClD,EAAA,EAAA,KAAC,EAAA,YAAgB,KAAjB,CACE,uBAAqB,eACrB,aAAc,EACd,GAAI,EACJ,CAAA,CACkB,CAAA,EAI1B,EAAY,YAAc,cClD1B,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCchE,IAAa,GAAqB,CAAE,UAAU,GAAO,GAAG,KAAoC,CAC1F,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACE,uBAAqB,sBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAkB,YAAc,qBCbhC,IAAa,GAAmB,CAC9B,WACA,YACA,QAAQ,GACR,IAAK,EACL,GAAG,KACqC,CACxC,IAAM,GAAA,EAAA,EAAA,QAAuC,KAAK,CAC5C,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAc,CAE/C,CAAE,YAAa,GAAgB,CAC/B,CAAE,aAAA,EAAA,EAAA,mBAA+B,EAAc,CAErD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,oBAChB,MACL,WAAA,EAAA,EAAA,IACE,uEACA,8BACA,CACG,cAAgB,CAAC,EACnB,CACD,EACD,CACD,MAAO,CACL,GAAI,GAAY,CACd,UACE,4HACF,SAAU,oBAAoB,EAAS,IAAM,MAAQ,OAAO,KAAK,EAAS,OAAS,MAAQ,OAAO,GAClG,aAAc,KAAK,EAAS,IAAM,MAAQ,UAC3C,CACF,CACD,GAAI,EAEH,WACG,CAAA,EAIV,EAAgB,YAAc,mBCrC9B,IAAa,GAAqB,CAChC,UAAU,GACV,IAAK,EACL,GAAG,KACyB,CAC5B,GAAM,CAAE,aAAc,GAAgB,CAChC,GAAA,EAAA,EAAA,cAAmB,EAAc,EAAU,CAC3C,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACO,MACL,uBAAqB,sBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAkB,YAAc,qBCvBhC,IAAa,GAAsB,CACjC,YACA,MACA,eACA,GAAG,KAC0B,CAC7B,GAAM,CAAE,aAAc,GAAgB,CAIhC,EAAqB,IAAiB,IAAA,OAAiC,EAAU,QAA/B,EAExD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACO,MACL,uBAAqB,uBACrB,KAAK,cACL,UAAW,IAAA,EAAA,EAAA,IAEP,EAAA,EAAoB,CAAE,KAAM,KAAM,SAAU,GAAM,CAAC,CACnD,sCAGA,8BACA,6DACA,yDACA,OAAO,GAAc,WAAa,EAAU,EAAM,CAAG,EACtD,CAEH,aAAc,EACd,GAAI,EACJ,CAAA,EAIN,EAAmB,YAAc,sBCvCjC,IAAa,EAA0B,IAC9B,EAAA,EAAA,KAAC,EAAA,YAAgB,YAAjB,CAA6B,uBAAqB,2BAA2B,GAAI,EAAS,CAAA,CAGnG,EAAuB,YAAc,0BCLrC,IAAa,GAAqB,CAChC,WACA,YACA,MACA,GAAG,MAEH,EAAA,EAAA,KAAC,SAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,IAAc,EAAW,CAAC,QAAS,QAAQ,CAAC,CAC5C,GAAI,EAEH,WACM,CAAA,CAGX,EAAkB,YAAc,qBChBhC,IAAa,GAAqB,CAChC,WACA,YACA,MACA,GAAG,MAEH,EAAA,EAAA,KAAC,SAAD,CACE,uBAAqB,sBAChB,MACL,WAAA,EAAA,EAAA,IAAc,EAAW,CAAC,QAAS,QAAQ,CAAC,CAC5C,GAAI,EAEH,WACM,CAAA,CAGX,EAAkB,YAAc,qBCdhC,IAAa,GAAsB,CAAE,YAAW,GAAG,MAE/C,EAAA,EAAA,KAAC,EAAA,YAAgB,SAAjB,CACE,uBAAqB,uBACrB,UAAW,IAAA,EAAA,EAAA,IAEP,iDACA,mBAEA,sCACA,qCACA,OAAO,GAAc,WAAa,EAAU,EAAM,CAAG,EACtD,CAEH,GAAI,EACJ,CAAA,CAIN,EAAmB,YAAc,sBCxBjC,IAAa,GAAqB,CAAE,YAAW,GAAG,MAE9C,EAAA,EAAA,KAAC,EAAA,YAAgB,OAAjB,CACE,uBAAqB,sBACrB,WAAA,EAAA,EAAA,IAAc,EAAW,mBAAmB,CAC5C,GAAI,EACJ,CAAA,CAIN,EAAkB,YAAc,qBCLhC,IAAa,GAAoB,CAAE,YAAW,GAAG,MAE7C,EAAA,EAAA,KAAC,EAAA,YAAgB,MAAjB,CACE,uBAAqB,qBACrB,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,EACJ,CAAA,CAIN,EAAiB,YAAc,oBCL/B,IAAa,GAAsB,CAAE,UAAU,GAAO,GAAG,KAAqC,CAC5F,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,KAAC,EAAA,YAAgB,QAAjB,CACE,uBAAqB,uBACrB,OAAQ,EACR,GAAI,EACJ,CAAA,EAIN,EAAmB,YAAc,sBCDjC,IAAa,EAYT,OAAO,OAAO,EAAM,CACtB,OAAQ,EACR,KAAM,EACN,OAAQ,EACR,QAAS,EACT,YAAa,EACb,OAAQ,EACR,OAAQ,EACR,QAAS,EACT,OAAQ,EACR,MAAO,EACP,QAAS,EACV,CAAC,CAEF,EAAY,YAAc,cAC1B,EAAY,OAAO,YAAc,qBACjC,EAAY,KAAK,YAAc,mBAC/B,EAAY,OAAO,YAAc,qBACjC,EAAY,QAAQ,YAAc,sBAClC,EAAY,YAAY,YAAc,0BACtC,EAAY,OAAO,YAAc,qBACjC,EAAY,OAAO,YAAc,qBACjC,EAAY,QAAQ,YAAc,sBAClC,EAAY,OAAO,YAAc,qBACjC,EAAY,MAAM,YAAc,oBAChC,EAAY,QAAQ,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n children,\n withFade = false,\n cancelRef,\n}: {\n children: ReactNode\n withFade?: boolean\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n return (\n <AlertDialogContext.Provider\n value={{\n cancelRef,\n withFade,\n }}\n >\n {children}\n </AlertDialogContext.Provider>\n )\n}\n\nexport const useAlertDialog = () => {\n const context = useContext(AlertDialogContext)\n\n if (!context) {\n throw Error('useAlertDialog must be used within an AlertDialog provider')\n }\n\n return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Root>,\n 'onOpenChange' | 'render'\n> {\n /**\n * Specifies if the dialog is open or not.\n */\n open?: boolean\n /**\n * Default open state.\n */\n defaultOpen?: boolean\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n const handleOpenChange = onOpenChange\n ? (open: boolean, _eventDetails: unknown) => {\n onOpenChange(open)\n }\n : undefined\n\n return (\n <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n <BaseAlertDialog.Root\n data-spark-component=\"alert-dialog\"\n onOpenChange={handleOpenChange}\n {...props}\n />\n </AlertDialogProvider>\n )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n data-spark-component=\"alert-dialog-action\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: AlertDialogBodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useAlertDialog()\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"alert-dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n asChild = false,\n ref: forwardedRef,\n ...props\n}: AlertDialogCancelProps) => {\n const { cancelRef } = useAlertDialog()\n const ref = useMergeRefs(forwardedRef, cancelRef)\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n ref={ref}\n data-spark-component=\"alert-dialog-cancel\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Popup>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n className,\n ref,\n initialFocus,\n ...others\n}: AlertDialogContentProps) => {\n const { cancelRef } = useAlertDialog()\n\n // Default: focus the cancel button when dialog opens\n // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n return (\n <BaseAlertDialog.Popup\n ref={ref}\n data-spark-component=\"alert-dialog-content\"\n role=\"alertdialog\"\n className={state =>\n cx(\n dialogContentStyles({ size: 'md', isNarrow: true }),\n 'min-w-[min(288px,calc(100vw-2rem))]',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n // Transition with opacity and scale for smooth open/close animations\n 'transition-all duration-150',\n 'data-starting-style:scale-90 data-starting-style:opacity-0',\n 'data-ending-style:scale-90 data-ending-style:opacity-0',\n typeof className === 'function' ? className(state) : className\n )\n }\n initialFocus={handleInitialFocus}\n {...others}\n />\n )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Description>,\n 'render'\n> {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogFooterProps): ReactElement => (\n <footer\n data-spark-component=\"alert-dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n <header\n data-spark-component=\"alert-dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Backdrop>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n return (\n <BaseAlertDialog.Backdrop\n data-spark-component=\"alert-dialog-overlay\"\n className={state =>\n cx(\n 'z-overlay fixed top-0 left-0 h-screen w-screen',\n 'bg-overlay/dim-1',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n 'data-starting-style:animate-fade-in',\n 'data-ending-style:animate-fade-out',\n typeof className === 'function' ? className(state) : className\n )\n }\n {...props}\n />\n )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n return (\n <BaseAlertDialog.Portal\n data-spark-component=\"alert-dialog-portal\"\n className={cx(className, 'z-modal absolute')}\n {...props}\n />\n )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Title>,\n 'render'\n> {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n return (\n <BaseAlertDialog.Title\n data-spark-component=\"alert-dialog-title\"\n className={cx('text-headline-1 text-on-surface', className)}\n {...props}\n />\n )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Trigger>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Trigger\n data-spark-component=\"alert-dialog-trigger\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n Action: typeof AlertDialogAction\n Body: typeof AlertDialogBody\n Cancel: typeof AlertDialogCancel\n Content: typeof AlertDialogContent\n Description: typeof AlertDialogDescription\n Footer: typeof AlertDialogFooter\n Header: typeof AlertDialogHeader\n Overlay: typeof AlertDialogOverlay\n Portal: typeof AlertDialogPortal\n Title: typeof AlertDialogTitle\n Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n Action: AlertDialogAction,\n Body: AlertDialogBody,\n Cancel: AlertDialogCancel,\n Content: AlertDialogContent,\n Description: AlertDialogDescription,\n Footer: AlertDialogFooter,\n Header: AlertDialogHeader,\n Overlay: AlertDialogOverlay,\n Portal: AlertDialogPortal,\n Title: AlertDialogTitle,\n Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n children,\n withFade = false,\n cancelRef,\n}: {\n children: ReactNode\n withFade?: boolean\n cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n return (\n <AlertDialogContext.Provider\n value={{\n cancelRef,\n withFade,\n }}\n >\n {children}\n </AlertDialogContext.Provider>\n )\n}\n\nexport const useAlertDialog = () => {\n const context = useContext(AlertDialogContext)\n\n if (!context) {\n throw Error('useAlertDialog must be used within an AlertDialog provider')\n }\n\n return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Root>,\n 'onOpenChange' | 'render'\n> {\n /**\n * Specifies if the dialog is open or not.\n */\n open?: boolean\n /**\n * Default open state.\n */\n defaultOpen?: boolean\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n const handleOpenChange = onOpenChange\n ? (open: boolean, _eventDetails: unknown) => {\n onOpenChange(open)\n }\n : undefined\n\n return (\n <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n <BaseAlertDialog.Root\n data-spark-component=\"alert-dialog\"\n onOpenChange={handleOpenChange}\n {...props}\n />\n </AlertDialogProvider>\n )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\n */\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n data-spark-component=\"alert-dialog-action\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n children: ReactNode\n className?: string\n tabIndex?: number\n ref?: Ref<HTMLDivElement>\n inset?: boolean\n}\n\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\n */\nexport const AlertDialogBody = ({\n children,\n className,\n inset = false,\n ref: forwardedRef,\n ...rest\n}: AlertDialogBodyProps): ReactElement => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useAlertDialog()\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"alert-dialog-body\"\n ref={ref}\n className={cx(\n 'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n 'transition-all duration-300',\n {\n ['px-xl py-lg']: !inset,\n },\n className\n )}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Close>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\n */\nexport const AlertDialogCancel = ({\n asChild = false,\n ref: forwardedRef,\n ...props\n}: AlertDialogCancelProps) => {\n const { cancelRef } = useAlertDialog()\n const ref = useMergeRefs(forwardedRef, cancelRef)\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Close\n ref={ref}\n data-spark-component=\"alert-dialog-cancel\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Popup>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\n */\nexport const AlertDialogContent = ({\n className,\n ref,\n initialFocus,\n ...others\n}: AlertDialogContentProps) => {\n const { cancelRef } = useAlertDialog()\n\n // Default: focus the cancel button when dialog opens\n // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n return (\n <BaseAlertDialog.Popup\n ref={ref}\n data-spark-component=\"alert-dialog-content\"\n role=\"alertdialog\"\n className={state =>\n cx(\n dialogContentStyles({ size: 'md', isNarrow: true }),\n 'min-w-[min(288px,calc(100vw-2rem))]',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n // Transition with opacity and scale for smooth open/close animations\n 'transition-all duration-150',\n 'data-starting-style:scale-90 data-starting-style:opacity-0',\n 'data-ending-style:scale-90 data-ending-style:opacity-0',\n typeof className === 'function' ? className(state) : className\n )\n }\n initialFocus={handleInitialFocus}\n {...others}\n />\n )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Description>,\n 'render'\n> {\n ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const AlertDialogFooter = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogFooterProps): ReactElement => (\n <footer\n data-spark-component=\"alert-dialog-footer\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the alert dialog. Renders a <header> element.\n */\nexport const AlertDialogHeader = ({\n children,\n className,\n ref,\n ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n <header\n data-spark-component=\"alert-dialog-header\"\n ref={ref}\n className={cx(className, ['px-xl', 'py-lg'])}\n {...rest}\n >\n {children}\n </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Backdrop>,\n 'render'\n> {\n ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n return (\n <BaseAlertDialog.Backdrop\n data-spark-component=\"alert-dialog-overlay\"\n className={state =>\n cx(\n 'z-overlay fixed top-0 left-0 h-screen w-screen',\n 'bg-overlay/dim-1',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n 'data-starting-style:animate-fade-in',\n 'data-ending-style:animate-fade-out',\n typeof className === 'function' ? className(state) : className\n )\n }\n {...props}\n />\n )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n return (\n <BaseAlertDialog.Portal\n data-spark-component=\"alert-dialog-portal\"\n className={cx(className, 'z-modal absolute')}\n {...props}\n />\n )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Title>,\n 'render'\n> {\n ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n return (\n <BaseAlertDialog.Title\n data-spark-component=\"alert-dialog-title\"\n className={cx('text-headline-1 text-on-surface', className)}\n {...props}\n />\n )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n ComponentProps<typeof BaseAlertDialog.Trigger>,\n 'render'\n> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the alert dialog. Renders a <button> element.\n */\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAlertDialog.Trigger\n data-spark-component=\"alert-dialog-trigger\"\n render={renderSlot}\n {...props}\n />\n )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n Action: typeof AlertDialogAction\n Body: typeof AlertDialogBody\n Cancel: typeof AlertDialogCancel\n Content: typeof AlertDialogContent\n Description: typeof AlertDialogDescription\n Footer: typeof AlertDialogFooter\n Header: typeof AlertDialogHeader\n Overlay: typeof AlertDialogOverlay\n Portal: typeof AlertDialogPortal\n Title: typeof AlertDialogTitle\n Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n Action: AlertDialogAction,\n Body: AlertDialogBody,\n Cancel: AlertDialogCancel,\n Content: AlertDialogContent,\n Description: AlertDialogDescription,\n Footer: AlertDialogFooter,\n Header: AlertDialogHeader,\n Overlay: AlertDialogOverlay,\n Portal: AlertDialogPortal,\n Title: AlertDialogTitle,\n Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}
|
|
@@ -3,6 +3,9 @@ export interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButton
|
|
|
3
3
|
angle?: number;
|
|
4
4
|
ariaLabel: string;
|
|
5
5
|
}
|
|
6
|
+
/**
|
|
7
|
+
* An action button positioned on the avatar, typically for editing. Renders a <button> element.
|
|
8
|
+
*/
|
|
6
9
|
export declare const AvatarAction: {
|
|
7
10
|
({ className, children, asChild, angle, ariaLabel, ...props }: AvatarActionProps): import("react/jsx-runtime").JSX.Element;
|
|
8
11
|
displayName: string;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
2
2
|
asChild?: boolean;
|
|
3
3
|
}
|
|
4
|
+
/**
|
|
5
|
+
* The avatar's image content. Renders an <img> element.
|
|
6
|
+
*/
|
|
4
7
|
export declare const AvatarImage: {
|
|
5
8
|
({ className, asChild, src, onLoad, onError, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
9
|
displayName: string;
|
|
@@ -2,6 +2,9 @@ import { ComponentPropsWithoutRef } from 'react';
|
|
|
2
2
|
interface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {
|
|
3
3
|
angle?: number;
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* A badge indicator showing the user's online status. Renders a <div> element.
|
|
7
|
+
*/
|
|
5
8
|
export declare const AvatarOnlineBadge: {
|
|
6
9
|
({ angle, ...props }: AvatarOnlineBadgeProps): import("react/jsx-runtime").JSX.Element | null;
|
|
7
10
|
displayName: string;
|
|
@@ -2,6 +2,9 @@ export interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivE
|
|
|
2
2
|
className?: string;
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.
|
|
7
|
+
*/
|
|
5
8
|
export declare const AvatarPlaceholder: {
|
|
6
9
|
({ className, children, ...props }: AvatarPlaceholderProps): import("react/jsx-runtime").JSX.Element;
|
|
7
10
|
displayName: string;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {
|
|
2
2
|
asChild?: boolean;
|
|
3
3
|
}
|
|
4
|
+
/**
|
|
5
|
+
* The user container that wraps avatar content. Renders a <div> element.
|
|
6
|
+
*/
|
|
4
7
|
export declare const AvatarUser: {
|
|
5
8
|
({ asChild, children, className, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
|
|
6
9
|
displayName: string;
|