@atom-learning/components 6.16.0-beta.2 → 6.16.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion/Accordion.js.map +1 -1
- package/dist/components/accordion/AccordionContent.js.map +1 -1
- package/dist/components/accordion/AccordionItem.js.map +1 -1
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.constants.js.map +1 -1
- package/dist/components/action-icon/ActionIcon.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialog.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertContext.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertDialog.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js.map +1 -1
- package/dist/components/alert-dialog/alert-context/reducer.js.map +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/avatar/AvatarContext.js.map +1 -1
- package/dist/components/avatar/AvatarIcon.js.map +1 -1
- package/dist/components/avatar/AvatarImage.js.map +1 -1
- package/dist/components/avatar/AvatarInitial.js.map +1 -1
- package/dist/components/avatar/AvatarPlaceholder.js.map +1 -1
- package/dist/components/badge/Badge.colorscheme.config.js.map +1 -1
- package/dist/components/badge/Badge.context.js.map +1 -1
- package/dist/components/badge/Badge.js.map +1 -1
- package/dist/components/badge/BadgeIcon.js.map +1 -1
- package/dist/components/badge/BadgeText.js.map +1 -1
- package/dist/components/banner/Banner.js.map +1 -1
- package/dist/components/banner/BannerContainer.js.map +1 -1
- package/dist/components/banner/BannerContext.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegular.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularActions.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularButton.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularContainer.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularContent.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularDismiss.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularHeading.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularImage.js.map +1 -1
- package/dist/components/banner/banner-regular/BannerRegularText.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlim.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimActions.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimButton.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContainer.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimContent.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimDismiss.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimImage.js.map +1 -1
- package/dist/components/banner/banner-slim/BannerSlimText.js.map +1 -1
- package/dist/components/box/Box.js.map +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/calendar/Calendar.js.map +1 -1
- package/dist/components/calendar/Day.js.map +1 -1
- package/dist/components/calendar/constants.js.map +1 -1
- package/dist/components/carousel/Carousel.js.map +1 -1
- package/dist/components/carousel/CarouselArrows.js.map +1 -1
- package/dist/components/carousel/CarouselPagination.js.map +1 -1
- package/dist/components/carousel/CarouselSlide.js.map +1 -1
- package/dist/components/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox-field/CheckboxField.js +1 -6
- package/dist/components/checkbox-field/CheckboxField.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroup.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupItem.js.map +1 -1
- package/dist/components/checkbox-group/CheckboxGroupSub.js.map +1 -1
- package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.js.map +1 -1
- package/dist/components/checkbox-group/context/CheckboxGroupMounted.context.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTree.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsible.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleContent.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleTrigger.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeItem.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeItemContent.js.map +1 -1
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/ChipGroup.js.map +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js.map +1 -1
- package/dist/components/chip-dismissible-group/ChipDismissibleGroupRoot.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map +1 -1
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/combobox/ComboboxList.js.map +1 -1
- package/dist/components/combobox/ComboboxOption.js.map +1 -1
- package/dist/components/combobox/ComboboxPopover.js.map +1 -1
- package/dist/components/create-password-field/CreatePasswordField.js.map +1 -1
- package/dist/components/data-table/DataTable.js +88 -0
- package/dist/components/data-table/DataTable.js.map +1 -1
- package/dist/components/data-table/DataTable.types.js.map +1 -1
- package/dist/components/data-table/DataTableBody.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActions.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActionsFloating.js.map +1 -1
- package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js.map +1 -1
- package/dist/components/data-table/DataTableContext.js.map +1 -1
- package/dist/components/data-table/DataTableDataCell.js.map +1 -1
- package/dist/components/data-table/DataTableEmptyState.js.map +1 -1
- package/dist/components/data-table/DataTableError.js.map +1 -1
- package/dist/components/data-table/DataTableGlobalFilter.js.map +1 -1
- package/dist/components/data-table/DataTableHead.js.map +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js.map +1 -1
- package/dist/components/data-table/DataTableLoading.js.map +1 -1
- package/dist/components/data-table/DataTableMetaData.js.map +1 -1
- package/dist/components/data-table/DataTableRow.js.map +1 -1
- package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableSelectAllRowsCheckbox.js.map +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.js.map +1 -1
- package/dist/components/data-table/drag-and-drop/DragAndDropTableRow.js.map +1 -1
- package/dist/components/data-table/getNewAsyncData.js.map +1 -1
- package/dist/components/data-table/pagination/Pagination.js.map +1 -1
- package/dist/components/data-table/usePagination.js.map +1 -1
- package/dist/components/data-table/useSorting.js.map +1 -1
- package/dist/components/date-field/DateField.js.map +1 -1
- package/dist/components/date-input/DateInput.js.map +1 -1
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/dialog/DialogActionBar.js.map +1 -1
- package/dist/components/dialog/DialogBackground.js.map +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dialog/DialogFooter.js.map +1 -1
- package/dist/components/dialog/DialogHeading.js.map +1 -1
- package/dist/components/dialog/DialogNavigationBar.js.map +1 -1
- package/dist/components/dialog/DialogScrollableContent.js.map +1 -1
- package/dist/components/dismissible/DismissibleRoot.js.map +1 -1
- package/dist/components/dismissible/DismissibleTrigger.js.map +1 -1
- package/dist/components/dismissible/index.js.map +1 -1
- package/dist/components/dismissible-group/DismissibleGroupItem.js.map +1 -1
- package/dist/components/dismissible-group/DismissibleGroupRoot.js.map +1 -1
- package/dist/components/dismissible-group/index.js.map +1 -1
- package/dist/components/divider/Divider.js.map +1 -1
- package/dist/components/drawer/Drawer.context.js.map +1 -1
- package/dist/components/drawer/Drawer.js.map +1 -1
- package/dist/components/drawer/DrawerClose.js.map +1 -1
- package/dist/components/drawer/DrawerContent.js.map +1 -1
- package/dist/components/drawer/DrawerFooter.js.map +1 -1
- package/dist/components/drawer/DrawerHeader.js.map +1 -1
- package/dist/components/drawer/DrawerMain.js.map +1 -1
- package/dist/components/drawer/DrawerOverlay.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenu.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuContent.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuItem.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuLinkItem.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuSeparator.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuTrigger.js.map +1 -1
- package/dist/components/empty-state/EmptyState.context.js.map +1 -1
- package/dist/components/empty-state/EmptyState.js.map +1 -1
- package/dist/components/empty-state/EmptyStateBody.js.map +1 -1
- package/dist/components/empty-state/EmptyStateImage.js.map +1 -1
- package/dist/components/empty-state/EmptyStateTitle.js.map +1 -1
- package/dist/components/field-wrapper/FieldDescription.js.map +1 -1
- package/dist/components/field-wrapper/FieldWrapper.js.map +1 -1
- package/dist/components/field-wrapper/InlineFieldWrapper.js.map +1 -1
- package/dist/components/file-drop/FileDrop.js.map +1 -1
- package/dist/components/file-drop/FileDropContext.js.map +1 -1
- package/dist/components/file-drop/useFileDrop.js.map +1 -1
- package/dist/components/file-input/FileInput.js.map +1 -1
- package/dist/components/flex/Flex.js.map +1 -1
- package/dist/components/form/Form.js.map +1 -1
- package/dist/components/form/useFieldError.js.map +1 -1
- package/dist/components/form/useFormCustomContext.js.map +1 -1
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/icon/Icon.js.map +1 -1
- package/dist/components/image/Image.js.map +1 -1
- package/dist/components/inline-message/InlineMessage.config.js.map +1 -1
- package/dist/components/inline-message/InlineMessage.js.map +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/input-field/InputField.js.map +1 -1
- package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map +1 -1
- package/dist/components/keyboard-shortcut/index.js.map +1 -1
- package/dist/components/label/Label.js.map +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/loader/Loader.js.map +1 -1
- package/dist/components/markdown-content/MarkdownContent.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownCode.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownEmphasis.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownHeading.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownImage.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownInlineCode.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownLink.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownList.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownListItem.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownParagraph.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownStrong.js.map +1 -1
- package/dist/components/markdown-content/components/MarkdownThematicBreak.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.colorscheme.config.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.d.ts +2 -0
- package/dist/components/navigation/NavigationMenu.js.map +1 -1
- package/dist/components/navigation/NavigationMenu.styles.js.map +1 -1
- package/dist/components/navigation/NavigationMenuContext.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdown.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownItem.d.ts +1 -0
- package/dist/components/navigation/NavigationMenuDropdownItem.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownTrigger.js.map +1 -1
- package/dist/components/navigation/NavigationMenuLink.d.ts +1 -0
- package/dist/components/navigation/NavigationMenuLink.js +22 -11
- package/dist/components/navigation/NavigationMenuLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.colorscheme.config.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalIcon.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItem.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalItemContent.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalLink.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalList.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map +1 -1
- package/dist/components/notification-badge/NotificationBadge.js.map +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/number-input-field/NumberInputField.js.map +1 -1
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationItems.js.map +1 -1
- package/dist/components/pagination/PaginationNextButton.js.map +1 -1
- package/dist/components/pagination/PaginationPage.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.js.map +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.js.map +1 -1
- package/dist/components/pagination/pagination.constants.js.map +1 -1
- package/dist/components/pagination/pagination.helper.js.map +1 -1
- package/dist/components/pagination/usePagination.js.map +1 -1
- package/dist/components/password-field/PasswordField.js.map +1 -1
- package/dist/components/password-input/PasswordInput.js.map +1 -1
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/popover/PopoverContent.js.map +1 -1
- package/dist/components/progress-bar/ProgressBar.js.map +1 -1
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/components/radio-button/RadioButtonGroup.js.map +1 -1
- package/dist/components/radio-button-field/RadioButtonField.js.map +1 -1
- package/dist/components/radio-button-field/RadioField.js.map +1 -1
- package/dist/components/radio-card/RadioCard.js.map +1 -1
- package/dist/components/radio-card/RadioCardGroup.js.map +1 -1
- package/dist/components/router-provider/RouterProvider.js.map +1 -1
- package/dist/components/search-field/SearchField.js.map +1 -1
- package/dist/components/search-input/SearchInput.js +4 -9
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/section-message/SectionMessage.js.map +1 -1
- package/dist/components/section-message/SectionMessageContext.js.map +1 -1
- package/dist/components/section-message/SectionMessageDescription.js.map +1 -1
- package/dist/components/section-message/SectionMessageDismiss.js.map +1 -1
- package/dist/components/section-message/SectionMessageIcon.js.map +1 -1
- package/dist/components/section-message/SectionMessageLayout.js.map +1 -1
- package/dist/components/section-message/SectionMessageTitle.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlBadge.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlContext.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlDescription.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlHeading.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlIcon.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItem.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlItemList.js.map +1 -1
- package/dist/components/segmented-control/SegmentedControlRoot.js.map +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select-field/SelectField.js.map +1 -1
- package/dist/components/side-bar/SideBar.js.map +1 -1
- package/dist/components/side-bar/SideBarComponents.js.map +1 -1
- package/dist/components/side-bar/SideBarContext.js.map +1 -1
- package/dist/components/skeleton-loader/Skeleton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonBarChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonButton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonColumnChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonHeading.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonPanelList.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonSubjectList.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonTable.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonTabs.js.map +1 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/slider/SliderSteps.js.map +1 -1
- package/dist/components/slider/SliderValue.js.map +1 -1
- package/dist/components/slider-field/SliderField.js.map +1 -1
- package/dist/components/sortable/Handle.js.map +1 -1
- package/dist/components/sortable/SortableHandle.js.map +1 -1
- package/dist/components/sortable/SortableItem.js.map +1 -1
- package/dist/components/sortable/SortableRoot.js.map +1 -1
- package/dist/components/spacer/Spacer.js.map +1 -1
- package/dist/components/stepper/Stepper.js.map +1 -1
- package/dist/components/stepper/StepperStepBack.js.map +1 -1
- package/dist/components/stepper/StepperStepBullet.js.map +1 -1
- package/dist/components/stepper/StepperStepContainer.js.map +1 -1
- package/dist/components/stepper/StepperStepForward.js.map +1 -1
- package/dist/components/stepper/StepperStepLabel.js.map +1 -1
- package/dist/components/stepper/StepperSteps.js.map +1 -1
- package/dist/components/stepper/stepper-context/StepperContext.js.map +1 -1
- package/dist/components/stepper/types.js.map +1 -1
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/TableBody.js.map +1 -1
- package/dist/components/table/TableCell.js.map +1 -1
- package/dist/components/table/TableFooter.js.map +1 -1
- package/dist/components/table/TableFooterCell.js.map +1 -1
- package/dist/components/table/TableHeader.js.map +1 -1
- package/dist/components/table/TableHeaderCell.js.map +1 -1
- package/dist/components/table/TableRow.js.map +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.js.map +1 -1
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/TabsContent.js.map +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/components/tabs/TabsTriggerList.js.map +1 -1
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/textarea/Textarea.js.map +1 -1
- package/dist/components/textarea-field/TextareaField.js.map +1 -1
- package/dist/components/tile/Tile.js.map +1 -1
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toast/Toast.js.map +1 -1
- package/dist/components/toast/ToastCloseButton.js.map +1 -1
- package/dist/components/toast/ToastContext.js.map +1 -1
- package/dist/components/toast/ToastIcon.js.map +1 -1
- package/dist/components/toast/ToastProvider.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupButton.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/index.js.map +1 -1
- package/dist/components/tooltip/Tooltip.js.map +1 -1
- package/dist/components/tooltip/TooltipContent.js.map +1 -1
- package/dist/components/top-bar/TopBar.colorscheme.config.js.map +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/components/top-bar/TopBarActionIcon.js.map +1 -1
- package/dist/components/top-bar/TopBarBrand.js.map +1 -1
- package/dist/components/tree/Tree.js.map +1 -1
- package/dist/components/tree/TreeCollapsible.js.map +1 -1
- package/dist/components/tree/TreeCollapsibleContent.js.map +1 -1
- package/dist/components/tree/TreeCollapsibleTrigger.js.map +1 -1
- package/dist/components/tree/TreeIcon.js.map +1 -1
- package/dist/components/tree/TreeItem.js.map +1 -1
- package/dist/components/tree/TreeItemContent.js.map +1 -1
- package/dist/components/tree/TreeList.js.map +1 -1
- package/dist/components/tree/TreeListItem.js.map +1 -1
- package/dist/components/tree/TreeText.js.map +1 -1
- package/dist/components/video/Video.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/experiments/color-scheme/ColorScheme.config.js.map +1 -1
- package/dist/experiments/color-scheme/ColorScheme.js.map +1 -1
- package/dist/index.cjs.js +133 -46
- package/dist/index.cjs.js.map +1 -1
- package/dist/styled.js +1 -2
- package/dist/styled.js.map +1 -1
- package/dist/utilities/css-wrapper/CSSWrapper.js.map +1 -1
- package/dist/utilities/event/preventEvent.js.map +1 -1
- package/dist/utilities/hooks/useCallbackRef.js.map +1 -1
- package/dist/utilities/hooks/useIsMountedRef.js.map +1 -1
- package/dist/utilities/hooks/useResizeObserver.js.map +1 -1
- package/dist/utilities/hooks/useScrollPosition.js.map +1 -1
- package/dist/utilities/hooks/useSize.js.map +1 -1
- package/dist/utilities/hooks/useWindowScrollPosition.js.map +1 -1
- package/dist/utilities/optional-tooltip-wrapper/OptionalTooltipWrapper.js.map +1 -1
- package/dist/utilities/override-styled-variant-value/overrideStyledVariantValue.js.map +1 -1
- package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map +1 -1
- package/dist/utilities/radix-overrides/toggle-group/index.js.map +1 -1
- package/dist/utilities/style/backdrop-overlay.js.map +1 -1
- package/dist/utilities/style/get-icon-size.js.map +1 -1
- package/dist/utilities/uri/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n Text,\n {\n base: ['font-body', 'text-text-regular'],\n variants: {\n size: {\n sm: ['text-sm', 'leading-[1.53]'],\n md: ['text-md', 'leading-normal'],\n lg: ['text-lg', 'leading-[1.52]']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAEA,IAAa,2BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,wBAAA,cAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n sm: 'sm',\n md: 'md',\n lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;
|
|
1
|
+
{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n sm: 'sm',\n md: 'md',\n lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n const { size } = React.useContext(SegmentedControlContext)\n\n return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAO,MAAM,QAAQ;CAAkB,CAAA;AAC1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n Trigger,\n {\n base: [\n 'relative',\n 'bg-transparent',\n 'rounded-md',\n 'z-2',\n 'min-w-35',\n 'border-2',\n 'border-transparent',\n 'cursor-pointer',\n 'select-none',\n 'flex',\n 'flex-col',\n 'items-center',\n 'justify-center',\n 'data-[state=active]:border-2',\n 'data-[state=active]:border-transparent',\n 'data-[state=active]:focus-visible:border-primary-800',\n 'data-[state=active]:focus-visible:shadow-none',\n 'data-[state=active]:font-semibold',\n 'data-[state=active]:shadow-none',\n 'data-[state=active]:text-(--text-bold)',\n 'data-[state=inactive]:font-normal',\n 'data-[state=inactive]:text-grey-900',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n 'focus-visible:outline-none'\n ],\n variants: {\n theme: {\n primary: [\n 'data-[state=inactive]:hover:bg-primary-300',\n 'focus-visible:border-primary-800'\n ],\n marsh: [\n 'data-[state=inactive]:hover:bg-marsh-300',\n 'focus-visible:border-marsh-800'\n ]\n },\n size: {\n sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n }\n },\n defaultVariants: {\n size: 'md',\n theme: 'primary'\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAEA,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,uBAAuB;CAEhE,OACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;CAE1C,GADT,QACS;AAEhB,CAAC;AAED,qBAAqB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n base: [\n 'relative',\n 'p-1',\n 'rounded-lg',\n 'overflow-hidden',\n '[&>div[role=tablist]]:relative',\n '[&>button]:z-2'\n ],\n variants: {\n theme: {\n primary: ['bg-primary-200'],\n marsh: ['bg-marsh-200']\n }\n }\n})\n\nconst SelectionIndicator = styled('div', {\n base: ['absolute', 'bg-white', 'rounded-md'],\n variants: {\n interacted: {\n true: ['duration-300', 'ease-in', 'transition-all'],\n false: ['transition-none']\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({\n left: Math.round(currentTab.offsetLeft),\n height: Math.round(height),\n width: Math.round(width)\n })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"mappings":";;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n base: [\n 'relative',\n 'p-1',\n 'rounded-lg',\n 'overflow-hidden',\n '[&>div[role=tablist]]:relative',\n '[&>button]:z-2'\n ],\n variants: {\n theme: {\n primary: ['bg-primary-200'],\n marsh: ['bg-marsh-200']\n }\n }\n})\n\nconst SelectionIndicator = styled('div', {\n base: ['absolute', 'bg-white', 'rounded-md'],\n variants: {\n interacted: {\n true: ['duration-300', 'ease-in', 'transition-all'],\n false: ['transition-none']\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({\n left: Math.round(currentTab.offsetLeft),\n height: Math.round(height),\n width: Math.round(width)\n })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"mappings":";;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACgB;CAChB,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,uBACF;CAEA,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,EAAE,WAC1D,UAAW,OAA8B,MAAM,UAAU,KAC5D;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAElB,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,uBAAuB;EACjE,MAAM,cAAc,QAAQ;EAC5B,YAAY,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,YAAY,SAAS,QAAQ;IAC3B,IAAI,KAAK,eAAe,UAAU,GAAG;GACvC,CAAC;GACD,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,QAAM,gBAAgB;EACpB,OAAO,iBAAiB,UAAU,uBAAuB;EACzD,aAAa;GACX,OAAO,oBAAoB,UAAU,uBAAuB;EAC9D;CACF,GAAG,CAAC,uBAAuB,CAAC;CAE5B,QAAM,gBAAgB;EACpB,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,wBAAA,cAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;CAsB9C,GArBjB,wBAAA,cAAC,oBAAD;EAAoB,YAAY;EAAe,OAAO;CAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;EACpD,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MACR,iEACF;EAGF,OAAO,QAAM,aACX,OAGA;GACE,UAAU,MAAM;IACd,iBAAiB,IAAI;IACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;GAChD;GACA,MAAM,OAAQ,QAAQ,QAAQ,SAAS;EACzC,CACF;CACF,CAAC,CACgB;AAEvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n const isControlled = props.value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? props.value : internalValue\n const handleValueChange = isControlled\n ? props.onValueChange\n : setInternalValue\n\n React.useEffect(() => {\n if (!isControlled && defaultValue) {\n setInternalValue(defaultValue)\n }\n }, [defaultValue, isControlled])\n\n const value = React.useMemo(\n () => ({\n size,\n theme,\n defaultValue,\n onValueChange: handleValueChange,\n value: currentValue\n }),\n [size, theme, defaultValue, handleValueChange, currentValue]\n )\n\n return (\n <SegmentedControlContext.Provider value={value}>\n <StyledSegmentedControlRoot\n size={size}\n value={currentValue}\n onValueChange={handleValueChange}\n {...props}\n >\n {children}\n </StyledSegmentedControlRoot>\n </SegmentedControlContext.Provider>\n )\n}\n"],"mappings":";;;;;AAQA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n Tabs,\n {\n base: ['[&>div]:border-none'],\n variants: {\n size: {\n sm: ['w-[unset]!'],\n md: [],\n lg: []\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n typeof StyledSegmentedControlRoot\n> {\n theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n size,\n theme = 'primary',\n defaultValue,\n children,\n ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n const isControlled = props.value !== undefined\n\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n const currentValue = isControlled ? props.value : internalValue\n const handleValueChange = isControlled\n ? props.onValueChange\n : setInternalValue\n\n React.useEffect(() => {\n if (!isControlled && defaultValue) {\n setInternalValue(defaultValue)\n }\n }, [defaultValue, isControlled])\n\n const value = React.useMemo(\n () => ({\n size,\n theme,\n defaultValue,\n onValueChange: handleValueChange,\n value: currentValue\n }),\n [size, theme, defaultValue, handleValueChange, currentValue]\n )\n\n return (\n <SegmentedControlContext.Provider value={value}>\n <StyledSegmentedControlRoot\n size={size}\n value={currentValue}\n onValueChange={handleValueChange}\n {...props}\n >\n {children}\n </StyledSegmentedControlRoot>\n </SegmentedControlContext.Provider>\n )\n}\n"],"mappings":";;;;;AAQA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,GAAG,YACwE;CAC3E,MAAM,eAAe,MAAM,UAAU,KAAA;CAErC,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,MAAM,QAAQ;CAClD,MAAM,oBAAoB,eACtB,MAAM,gBACN;CAEJ,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,QAAQ,QAAM,eACX;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,wBAAA,cAAC,wBAAwB,UAAzB,EAAyC,MASP,GARhC,wBAAA,cAAC,4BAAD;EACQ;EACN,OAAO;EACP,eAAe;EACf,GAAI;CAGsB,GADzB,QACyB,CACI;AAEtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n 'select',\n {\n base: [\n 'bg-(image:--bg-chevron)',\n 'appearance-none',\n '[background-repeat:no-repeat,repeat-x]',\n 'rounded-md',\n 'text-grey-1000',\n 'block',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'w-full',\n 'hover:cursor-pointer',\n '-ms-expand:hidden',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n '*[[disabled]]:opacity-30',\n '*[[disabled]]:cursor-not-allowed'\n ],\n variants: {\n size: {\n sm: [\n 'bg-position-[right_--spacing(2)_top_50%,0_0]',\n 'bg-size-[18px_auto,100%]',\n 'text-sm',\n 'h-8',\n 'pl-2',\n 'pr-8'\n ],\n md: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-10',\n 'pl-3',\n 'pr-10'\n ],\n lg: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-12',\n 'pl-3',\n 'pr-10'\n ]\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus:border-primary-800',\n 'focus:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus:outline-2',\n 'focus:outline-blue-800',\n 'focus:outline-offset-1',\n 'focus:outline-solid',\n 'focus:z-1'\n ]\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus:outline-danger']\n },\n {\n appearance: 'modern',\n theme: 'white',\n class: ['bg-white']\n },\n {\n appearance: 'modern',\n theme: 'grey',\n class: ['bg-grey-100']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // | { id: string; 'aria-label'?: string }\n // | { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n // Type assertion needed due to responsive variant size prop compatibility\n const props: React.ComponentProps<typeof StyledSelect> = {\n size,\n appearance,\n ref,\n ...remainingProps\n }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n 'select',\n {\n base: [\n 'bg-(image:--bg-chevron)',\n 'appearance-none',\n '[background-repeat:no-repeat,repeat-x]',\n 'rounded-md',\n 'text-grey-1000',\n 'block',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'w-full',\n 'hover:cursor-pointer',\n '-ms-expand:hidden',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n '*[[disabled]]:opacity-30',\n '*[[disabled]]:cursor-not-allowed'\n ],\n variants: {\n size: {\n sm: [\n 'bg-position-[right_--spacing(2)_top_50%,0_0]',\n 'bg-size-[18px_auto,100%]',\n 'text-sm',\n 'h-8',\n 'pl-2',\n 'pr-8'\n ],\n md: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-10',\n 'pl-3',\n 'pr-10'\n ],\n lg: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-12',\n 'pl-3',\n 'pr-10'\n ]\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus:border-primary-800',\n 'focus:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus:outline-2',\n 'focus:outline-blue-800',\n 'focus:outline-offset-1',\n 'focus:outline-solid',\n 'focus:z-1'\n ]\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus:outline-danger']\n },\n {\n appearance: 'modern',\n theme: 'white',\n class: ['bg-white']\n },\n {\n appearance: 'modern',\n theme: 'grey',\n class: ['bg-grey-100']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // | { id: string; 'aria-label'?: string }\n // | { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n // Type assertion needed due to responsive variant size prop compatibility\n const props: React.ComponentProps<typeof StyledSelect> = {\n size,\n appearance,\n ref,\n ...remainingProps\n }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,sBAAsB;EACnD;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,GACA,EAAE,2BAA2B,KAAK,CACpC;AAgBA,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;CACL;CAEA,IACE,CAAC,eAAe,OAAO,eAAe,YAAY,EAAE,OACjD,UAAU,UAAU,KAAA,CACvB,GAEA,MAAM,eAAe;CAGvB,OACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;CAEtB,GADL,WACK,GAET,QACW;AAElB,CACF;AAEA,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n className,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance || appearance\n const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Select\n name={name}\n id={name}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n className,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance || appearance\n const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Select\n name={name}\n id={name}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;CAaA,GAXZ,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,OAAO;EACP,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,QAAQ;CAGzB,GADL,QACK,CACI;AAElB;AAEA,YAAY,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\nimport { cn } from '~/styled'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n '--background': 'white',\n '--text': 'var(--color-grey-800)',\n '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n base: ['sticky', 'z-1'],\n variants: {\n type: {\n static: [],\n expandable: ['w-22']\n }\n }\n})\n\nconst Content = styled('div', {\n base: [\n 'bg-(--background)',\n 'border-r',\n 'border-r-(--border)',\n 'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n 'flex',\n 'flex-col',\n 'h-full',\n 'overflow-hidden',\n 'will-change-width',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[shadow,width]'\n ],\n variants: {\n type: {\n static: [],\n expandable: []\n },\n isExpanded: {\n true: ['w-[16rem]'],\n false: ['w-22']\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n base: [\n 'bottom-0',\n 'left-0',\n 'absolute',\n 'right-0',\n 'top-0',\n 'transition-all'\n ],\n variants: {\n isVisible: {\n true: ['delay-0', 'visible'],\n false: ['delay-50', 'invisible']\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n className?: string\n offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n theme,\n className,\n children,\n type = 'expandable',\n offset = '0px',\n style,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Theme theme={theme || light}>\n <Root\n {...rest}\n style={{ ...style, '--offset': offset }}\n type={type}\n className={cn(\n 'h-[calc(100svh-var(--offset))]',\n 'top-(--offset)',\n className\n )}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/**\n * When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </Theme>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;
|
|
1
|
+
{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\nimport { cn } from '~/styled'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n '--background': 'white',\n '--text': 'var(--color-grey-800)',\n '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n base: ['sticky', 'z-1'],\n variants: {\n type: {\n static: [],\n expandable: ['w-22']\n }\n }\n})\n\nconst Content = styled('div', {\n base: [\n 'bg-(--background)',\n 'border-r',\n 'border-r-(--border)',\n 'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n 'flex',\n 'flex-col',\n 'h-full',\n 'overflow-hidden',\n 'will-change-width',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[shadow,width]'\n ],\n variants: {\n type: {\n static: [],\n expandable: []\n },\n isExpanded: {\n true: ['w-[16rem]'],\n false: ['w-22']\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n base: [\n 'bottom-0',\n 'left-0',\n 'absolute',\n 'right-0',\n 'top-0',\n 'transition-all'\n ],\n variants: {\n isVisible: {\n true: ['delay-0', 'visible'],\n false: ['delay-50', 'invisible']\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n className?: string\n offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n theme,\n className,\n children,\n type = 'expandable',\n offset = '0px',\n style,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Theme theme={theme || light}>\n <Root\n {...rest}\n style={{ ...style, '--offset': offset }}\n type={type}\n className={cn(\n 'h-[calc(100svh-var(--offset))]',\n 'top-(--offset)',\n className\n )}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/**\n * When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </Theme>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"mappings":";;;;;;AAgBA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAa,WAAW,EACtB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,MAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAEP,OACE,sBAAA,cAAC,eAAe,UAAhB,EAAyB,OAAO,EAAE,WAAW,EAwBpB,GAvBvB,sBAAA,cAAC,OAAD,EAAO,OAAO,SAAS,MAsBhB,GArBL,sBAAA,cAAC,MAAD;EACE,GAAI;EACJ,OAAO;GAAE,GAAG;GAAO,YAAY;EAAO;EAChC;EACN,WAAW,GACT,kCACA,kBACA,SACF;CAYI,GAVJ,sBAAA,cAAC,SAAD;EAAS,GAAI;EAA6B;EAAkB;CASnD,GARN,UAKA,SAAS,gBACR,sBAAA,cAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD,CACL,CACD,CACgB;AAE7B;AAEA,QAAQ,QAAQ;AAChB,QAAQ,YAAY;AACpB,QAAQ,YAAY;AACpB,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,QAAQ,SAAS;AAEjB,QAAQ,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = styled('a', {\n base: [\n 'items-end',\n 'text-text',\n 'flex',\n 'gap-4',\n 'no-underline',\n 'hover:no-underline',\n 'focus:no-underline'\n ]\n})\n\nexport const SideBarBrand =\n StyledSideBarBrand as React.ForwardRefExoticComponent<\n React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n >\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;AAOA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;
|
|
1
|
+
{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = styled('a', {\n base: [\n 'items-end',\n 'text-text',\n 'flex',\n 'gap-4',\n 'no-underline',\n 'hover:no-underline',\n 'focus:no-underline'\n ]\n})\n\nexport const SideBarBrand =\n StyledSideBarBrand as React.ForwardRefExoticComponent<\n React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n >\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;AAOA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAcD,IAAa,eAZc,OAAO,KAAK,EACrC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAGE;AAIF,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,mBAAmB,EACzC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBarContext.js","names":[],"sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n isExpanded?: boolean\n}>({\n isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,
|
|
1
|
+
{"version":3,"file":"SideBarContext.js","names":[],"sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n isExpanded?: boolean\n}>({\n isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,WAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const SkeletonLoader = styled('div', {\n base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;
|
|
1
|
+
{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const SkeletonLoader = styled('div', {\n base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;AAAiB,EACpD,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\n\nconst LegendItem = () => (\n <div className=\"flex items-center gap-2\">\n <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n </div>\n)\n\nexport const SkeletonBarChart = ({\n numberOfLabels = 3,\n numberOfRows = 4,\n numberOfTicks = 4,\n className\n}: {\n numberOfLabels?: number\n numberOfRows?: number\n numberOfTicks?: number\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n <div className=\"flex items-center gap-4\">\n {Array.from({ length: numberOfLabels }, (_, i) => (\n <LegendItem key={i} />\n ))}\n </div>\n <div className=\"flex flex-col justify-between gap-4\">\n {Array.from({ length: numberOfRows }, (_, i) => (\n <div key={i} className=\"flex items-center gap-5\">\n <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n <div className=\"grow\">\n <SkeletonLoader\n className=\"h-5 w-(--width) rounded-full\"\n style={{\n '--width': `${getBarWidth(i)}%`\n }}\n />\n </div>\n </div>\n ))}\n <div className=\"flex justify-between pl-24\">\n {Array.from({ length: numberOfTicks }, (_, i) => (\n <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n ))}\n </div>\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,
|
|
1
|
+
{"version":3,"file":"SkeletonBarChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarWidth = (rowIndex: number) =>\n Math.round(40 + Math.abs(Math.sin(rowIndex + 1)) * 55)\n\nconst LegendItem = () => (\n <div className=\"flex items-center gap-2\">\n <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n </div>\n)\n\nexport const SkeletonBarChart = ({\n numberOfLabels = 3,\n numberOfRows = 4,\n numberOfTicks = 4,\n className\n}: {\n numberOfLabels?: number\n numberOfRows?: number\n numberOfTicks?: number\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n <div className=\"flex items-center gap-4\">\n {Array.from({ length: numberOfLabels }, (_, i) => (\n <LegendItem key={i} />\n ))}\n </div>\n <div className=\"flex flex-col justify-between gap-4\">\n {Array.from({ length: numberOfRows }, (_, i) => (\n <div key={i} className=\"flex items-center gap-5\">\n <SkeletonLoader className=\"h-3 w-20 shrink-0 rounded-full\" />\n <div className=\"grow\">\n <SkeletonLoader\n className=\"h-5 w-(--width) rounded-full\"\n style={{\n '--width': `${getBarWidth(i)}%`\n }}\n />\n </div>\n </div>\n ))}\n <div className=\"flex justify-between pl-24\">\n {Array.from({ length: numberOfTicks }, (_, i) => (\n <SkeletonLoader key={i} className=\"h-2 w-8 rounded-full\" />\n ))}\n </div>\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,eAAe,aACnB,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,WAAW,CAAC,CAAC,IAAI,EAAE;AAEvD,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAGV,GAFH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAa,oBAAoB,EAC/B,iBAAiB,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS,EA0B7D,GAzBJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,EAAI,CAAA,CACtB,CACE,GACL,sBAAA,cAAC,OAAD,EAAK,WAAU,sCAmBV,GAlBF,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,MACxC,sBAAA,cAAC,OAAD;CAAK,KAAK;CAAG,WAAU;AAUlB,GATH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,iCAAkC,CAAA,GAC5D,sBAAA,cAAC,OAAD,EAAK,WAAU,OAOV,GANH,sBAAA,cAAC,gBAAD;CACE,WAAU;CACV,OAAO,EACL,WAAW,GAAG,YAAY,CAAC,EAAE,GAC/B;AACD,CAAA,CACE,CACF,CACN,GACD,sBAAA,cAAC,OAAD,EAAK,WAAU,6BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,cAAc,IAAI,GAAG,MACzC,sBAAA,cAAC,gBAAD;CAAgB,KAAK;CAAG,WAAU;AAAwB,CAAA,CAC3D,CACE,CACF,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonButton.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n <SkeletonLoader className={cn('w-[10rem]', 'h-8', 'rounded-sm', className)} />\n)\n"],"mappings":";;;;AAMA,IAAa,kBAAkB,EAC7B,gBAIA,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,aAAa,OAAO,cAAc,
|
|
1
|
+
{"version":3,"file":"SkeletonButton.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n <SkeletonLoader className={cn('w-[10rem]', 'h-8', 'rounded-sm', className)} />\n)\n"],"mappings":";;;;AAMA,IAAa,kBAAkB,EAC7B,gBAIA,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,aAAa,OAAO,cAAc,SAAS,EAAI,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n numberOfRows = 3,\n withChart,\n className\n}: {\n numberOfRows?: number\n withChart?: boolean\n className?: string\n}) => (\n <Tile\n className={cn(\n 'relative',\n 'w-full',\n 'flex-col',\n 'items-center',\n 'gap-6 p-6',\n className\n )}\n >\n <div className=\"align-center flex w-full gap-6\">\n {withChart && <SkeletonDoughnutChart />}\n <div className=\"flex grow flex-col gap-6\">\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowNumber) => (\n <SkeletonLoader\n key={rowNumber}\n className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n />\n )\n )}\n </div>\n </div>\n <SkeletonButton />\n </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,aACA,
|
|
1
|
+
{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Flex } from '../flex/Flex'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n numberOfRows = 3,\n withChart,\n className\n}: {\n numberOfRows?: number\n withChart?: boolean\n className?: string\n}) => (\n <Tile\n className={cn(\n 'relative',\n 'w-full',\n 'flex-col',\n 'items-center',\n 'gap-6 p-6',\n className\n )}\n >\n <div className=\"align-center flex w-full gap-6\">\n {withChart && <SkeletonDoughnutChart />}\n <div className=\"flex grow flex-col gap-6\">\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowNumber) => (\n <SkeletonLoader\n key={rowNumber}\n className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n />\n )\n )}\n </div>\n </div>\n <SkeletonButton />\n </Tile>\n)\n"],"mappings":";;;;;;;AAUA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,YACA,UACA,YACA,gBACA,aACA,SACF,EAgBI,GAdJ,sBAAA,cAAC,OAAD,EAAK,WAAU,iCAYV,GAXF,aAAa,sBAAA,cAAC,uBAAA,IAAuB,GACtC,sBAAA,cAAC,OAAD,EAAK,WAAU,2BASV,GARF,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,EAAE,KACxD,cACC,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;AACX,CAAA,CAEL,CACG,CACF,GACL,sBAAA,cAAC,gBAAA,IAAgB,CACb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n numberOfColumns,\n groupIndex\n}: {\n numberOfColumns: number\n groupIndex: number\n}) => (\n <div className=\"flex flex-col items-center gap-4\">\n <div className=\"flex items-end gap-2\">\n {Array.from({ length: numberOfColumns }, (_, i) => (\n <SkeletonLoader\n key={i}\n className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n style={{\n '--height': `${getBarHeight(groupIndex, i)}px`\n }}\n />\n ))}\n </div>\n <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n </div>\n)\n\nconst LegendItem = () => (\n <div className=\"flex items-center gap-2\">\n <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n </div>\n)\n\nexport const SkeletonColumnChart = ({\n numberOfLabels = 2,\n numberOfGroups = 7,\n numberOfColumns = 1,\n className\n}: {\n numberOfLabels?: number\n numberOfGroups?: number\n numberOfColumns?: number\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n <div className=\"flex flex-col gap-3\">\n <div className=\"flex items-center gap-4\">\n {Array.from({ length: numberOfLabels }, (_, i) => (\n <LegendItem key={i} />\n ))}\n </div>\n </div>\n <div className=\"flex items-end justify-between gap-2\">\n {Array.from({ length: numberOfGroups }, (_, i) => (\n <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n ))}\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,
|
|
1
|
+
{"version":3,"file":"SkeletonColumnChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonColumnChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nconst getBarHeight = (groupIndex: number, columnIndex: number) =>\n Math.round(90 + Math.abs(Math.sin(groupIndex + columnIndex + 1)) * 30)\n\nconst ColumnGroup = ({\n numberOfColumns,\n groupIndex\n}: {\n numberOfColumns: number\n groupIndex: number\n}) => (\n <div className=\"flex flex-col items-center gap-4\">\n <div className=\"flex items-end gap-2\">\n {Array.from({ length: numberOfColumns }, (_, i) => (\n <SkeletonLoader\n key={i}\n className=\"h-(--height) w-5 rounded-t-full rounded-b-none\"\n style={{\n '--height': `${getBarHeight(groupIndex, i)}px`\n }}\n />\n ))}\n </div>\n <SkeletonLoader className=\"h-2 w-14 rounded-full\" />\n </div>\n)\n\nconst LegendItem = () => (\n <div className=\"flex items-center gap-2\">\n <SkeletonLoader className=\"h-3 w-3 rounded-full\" />\n <SkeletonLoader className=\"h-3 w-24 rounded-full\" />\n </div>\n)\n\nexport const SkeletonColumnChart = ({\n numberOfLabels = 2,\n numberOfGroups = 7,\n numberOfColumns = 1,\n className\n}: {\n numberOfLabels?: number\n numberOfGroups?: number\n numberOfColumns?: number\n className?: string\n}) => (\n <Tile className={cn('p-6', 'flex-col', 'gap-6', 'w-full', className)}>\n <div className=\"flex flex-col gap-3\">\n <div className=\"flex items-center gap-4\">\n {Array.from({ length: numberOfLabels }, (_, i) => (\n <LegendItem key={i} />\n ))}\n </div>\n </div>\n <div className=\"flex items-end justify-between gap-2\">\n {Array.from({ length: numberOfGroups }, (_, i) => (\n <ColumnGroup key={i} numberOfColumns={numberOfColumns} groupIndex={i} />\n ))}\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,YAAoB,gBACxC,KAAK,MAAM,KAAK,KAAK,IAAI,KAAK,IAAI,aAAa,cAAc,CAAC,CAAC,IAAI,EAAE;AAEvE,IAAM,eAAe,EACnB,iBACA,iBAKA,sBAAA,cAAC,OAAD,EAAK,WAAU,mCAaV,GAZH,sBAAA,cAAC,OAAD,EAAK,WAAU,uBAUV,GATF,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,MAC3C,sBAAA,cAAC,gBAAD;CACE,KAAK;CACL,WAAU;CACV,OAAO,EACL,YAAY,GAAG,aAAa,YAAY,CAAC,EAAE,IAC7C;AACD,CAAA,CACF,CACE,GACL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAM,mBACJ,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAGV,GAFH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,sBAAA,cAAC,gBAAD,EAAgB,WAAU,wBAAyB,CAAA,CAChD;AAGP,IAAa,uBAAuB,EAClC,iBAAiB,GACjB,iBAAiB,GACjB,kBAAkB,GAClB,gBAOA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,UAAU,SAAS,EAa7D,GAZJ,sBAAA,cAAC,OAAD,EAAK,WAAU,sBAMV,GALH,sBAAA,cAAC,OAAD,EAAK,WAAU,0BAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,YAAD,EAAY,KAAK,EAAI,CAAA,CACtB,CACE,CACF,GACL,sBAAA,cAAC,OAAD,EAAK,WAAU,uCAIV,GAHF,MAAM,KAAK,EAAE,QAAQ,eAAe,IAAI,GAAG,MAC1C,sBAAA,cAAC,aAAD;CAAa,KAAK;CAAoB;CAAiB,YAAY;AAAI,CAAA,CACxE,CACE,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n const numberOfSegments = 5\n const gap = 4\n const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n const stops: string[] = []\n let current = 0\n\n Array.from({ length: numberOfSegments }).forEach(() => {\n stops.push(\n `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n )\n current += segmentAngle\n stops.push(`white ${current}deg ${current + gap}deg`)\n current += gap\n })\n\n return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n className\n}: {\n className?: string\n}) => (\n <Tile className={cn('p-6', 'size-60', className)}>\n <div\n className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n style={{ '--gradient': buildConicGradient() }}\n >\n <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n </div>\n </Tile>\n)\n"],"mappings":";;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,
|
|
1
|
+
{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n const numberOfSegments = 5\n const gap = 4\n const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n const stops: string[] = []\n let current = 0\n\n Array.from({ length: numberOfSegments }).forEach(() => {\n stops.push(\n `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n )\n current += segmentAngle\n stops.push(`white ${current}deg ${current + gap}deg`)\n current += gap\n })\n\n return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n className\n}: {\n className?: string\n}) => (\n <Tile className={cn('p-6', 'size-60', className)}>\n <div\n className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n style={{ '--gradient': buildConicGradient() }}\n >\n <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n </div>\n </Tile>\n)\n"],"mappings":";;;;AAMA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,EAAE,cAAc;EACrD,MAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,IAChE;EACA,WAAW;EACX,MAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,IAAI;EACpD,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,WAAW,SAAS,EAOzC,GANJ,sBAAA,cAAC,OAAD;CACE,WAAU;CACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;AAGzC,GADH,sBAAA,cAAC,OAAD,EAAK,WAAU,qDAAsD,CAAA,CAClE,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => <SkeletonLoader className={cn('w-64', 'h-6', 'rounded-xl', className)} />\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,gBAGI,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,QAAQ,OAAO,cAAc,
|
|
1
|
+
{"version":3,"file":"SkeletonHeading.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => <SkeletonLoader className={cn('w-64', 'h-6', 'rounded-xl', className)} />\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,gBAGI,sBAAA,cAAC,gBAAD,EAAgB,WAAW,GAAG,QAAQ,OAAO,cAAc,SAAS,EAAI,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n <SkeletonLoader className=\"size-10 rounded-full\" />\n <div className=\"grow\">\n <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n </div>\n <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,
|
|
1
|
+
{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n <SkeletonLoader className=\"size-10 rounded-full\" />\n <div className=\"grow\">\n <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n </div>\n <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n </div>\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,qBAAqB,EAAE,gBAClC,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS,EAQrD,GAPJ,sBAAA,cAAC,OAAD,EAAK,WAAU,kFAMV,GALH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA,GAClD,sBAAA,cAAC,OAAD,EAAK,WAAU,OAEV,GADH,sBAAA,cAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA,CACjD,GACL,sBAAA,cAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA,CAC9C,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n <Tile\n className={cn(\n 'p-2',\n 'flex-row',\n 'flex-wrap',\n 'items-center',\n 'justify-between',\n 'gap-4',\n 'w-full',\n className\n )}\n >\n <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,uBAAuB,EAAE,gBACpC,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,
|
|
1
|
+
{"version":3,"file":"SkeletonSubjectList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonSubjectList.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonSubjectList = ({ className }: { className?: string }) => (\n <Tile\n className={cn(\n 'p-2',\n 'flex-row',\n 'flex-wrap',\n 'items-center',\n 'justify-between',\n 'gap-4',\n 'w-full',\n className\n )}\n >\n <SkeletonLoader className=\"h-22 max-w-xl grow rounded-xl\" />\n <SkeletonLoader className=\"size-10 shrink-0 rounded-md\" />\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,uBAAuB,EAAE,gBACpC,sBAAA,cAAC,MAAD,EACE,WAAW,GACT,OACA,YACA,aACA,gBACA,mBACA,SACA,UACA,SACF,EAII,GAFJ,sBAAA,cAAC,gBAAD,EAAgB,WAAU,gCAAiC,CAAA,GAC3D,sBAAA,cAAC,gBAAD,EAAgB,WAAU,8BAA+B,CAAA,CACrD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n numberOfColumns = 4,\n numberOfRows = 4,\n columnWidth,\n className\n}: {\n numberOfColumns?: number\n numberOfRows?: number\n columnWidth?: Record<number, string>\n className?: string\n}) => {\n return (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n <Table size=\"md\">\n <Table.Header theme=\"white\">\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.HeaderCell key={columnIndex}>\n <SkeletonLoader\n style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n className=\"h-4 w-(--width) rounded-xl\"\n />\n </Table.HeaderCell>\n )\n )}\n </Table.Header>\n <Table.Body striped={false}>\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowIndex) => (\n <Table.Row key={rowIndex}>\n {Array.from(\n { length: numberOfColumns },\n (_, index) => index\n ).map((columnIndex) => (\n <Table.Cell key={columnIndex} className=\"border-none\">\n <SkeletonLoader\n style={{\n '--width': columnWidth?.[columnIndex] || '100px'\n }}\n className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n />\n </Table.Cell>\n ))}\n </Table.Row>\n )\n )}\n </Table.Body>\n </Table>\n </Tile>\n )\n}\n"],"mappings":";;;;;;AAQA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAMI;
|
|
1
|
+
{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n numberOfColumns = 4,\n numberOfRows = 4,\n columnWidth,\n className\n}: {\n numberOfColumns?: number\n numberOfRows?: number\n columnWidth?: Record<number, string>\n className?: string\n}) => {\n return (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n <Table size=\"md\">\n <Table.Header theme=\"white\">\n {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n (columnIndex) => (\n <Table.HeaderCell key={columnIndex}>\n <SkeletonLoader\n style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n className=\"h-4 w-(--width) rounded-xl\"\n />\n </Table.HeaderCell>\n )\n )}\n </Table.Header>\n <Table.Body striped={false}>\n {Array.from({ length: numberOfRows }, (_, index) => index).map(\n (rowIndex) => (\n <Table.Row key={rowIndex}>\n {Array.from(\n { length: numberOfColumns },\n (_, index) => index\n ).map((columnIndex) => (\n <Table.Cell key={columnIndex} className=\"border-none\">\n <SkeletonLoader\n style={{\n '--width': columnWidth?.[columnIndex] || '100px'\n }}\n className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n />\n </Table.Cell>\n ))}\n </Table.Row>\n )\n )}\n </Table.Body>\n </Table>\n </Tile>\n )\n}\n"],"mappings":";;;;;;AAQA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAMI;CACJ,OACE,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS,EAoC/D,GAnCJ,sBAAA,cAAC,OAAD,EAAO,MAAK,KAkCL,GAjCL,sBAAA,cAAC,MAAM,QAAP,EAAc,OAAM,QAWN,GAVX,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,EAAE,KAC3D,gBACC,sBAAA,cAAC,MAAM,YAAP,EAAkB,KAAK,YAKL,GAJhB,sBAAA,cAAC,gBAAD;EACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;EAC1D,WAAU;CACX,CAAA,CACe,CAEtB,CACY,GACd,sBAAA,cAAC,MAAM,MAAP,EAAY,SAAS,MAoBT,GAnBT,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,EAAE,KACxD,aACC,sBAAA,cAAC,MAAM,KAAP,EAAW,KAAK,SAcL,GAbR,MAAM,KACL,EAAE,QAAQ,gBAAgB,IACzB,GAAG,UAAU,KAChB,EAAE,KAAK,gBACL,sBAAA,cAAC,MAAM,MAAP;EAAY,KAAK;EAAa,WAAU;CAO5B,GANV,sBAAA,cAAC,gBAAD;EACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;EACA,WAAU;CACX,CAAA,CACS,CACb,CACQ,CAEf,CACU,CACP,CACH;AAEV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n numberOfTabs,\n className,\n tabClassName\n}: {\n numberOfTabs: number\n className?: string\n tabClassName?: string\n}) => (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', className)}>\n {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n (key) => (\n <SkeletonLoader\n key={key}\n className={cn('w-32', 'h-6', 'rounded-sm', tabClassName)}\n />\n )\n )}\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,gBAAgB,EAC3B,cACA,WACA,mBAMA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,
|
|
1
|
+
{"version":3,"file":"SkeletonTabs.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n numberOfTabs,\n className,\n tabClassName\n}: {\n numberOfTabs: number\n className?: string\n tabClassName?: string\n}) => (\n <Tile className={cn('p-6', 'flex-row', 'gap-4', className)}>\n {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n (key) => (\n <SkeletonLoader\n key={key}\n className={cn('w-32', 'h-6', 'rounded-sm', tabClassName)}\n />\n )\n )}\n </Tile>\n)\n"],"mappings":";;;;;AAOA,IAAa,gBAAgB,EAC3B,cACA,WACA,mBAMA,sBAAA,cAAC,MAAD,EAAM,WAAW,GAAG,OAAO,YAAY,SAAS,SAAS,EASnD,GARH,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,OAAO,OAAO,EAAE,KACjE,QACC,sBAAA,cAAC,gBAAD;CACO;CACL,WAAW,GAAG,QAAQ,OAAO,cAAc,YAAY;AACxD,CAAA,CAEL,CACI"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n base: [\n 'rounded-full',\n 'grow',\n 'relative',\n 'data-[orientation=horizontal]:h-1',\n 'data-[orientation=vertical]:w-1'\n ],\n variants: {\n theme: {\n light: ['bg-white'],\n tonal: ['bg-grey-600']\n }\n }\n})\n\nconst StyledSlider = styled(Root, {\n base: [\n 'items-center',\n 'flex',\n 'relative',\n 'touch-none',\n 'select-none',\n 'cursor-pointer',\n 'data-[orientation=horizontal]:h-4',\n 'data-[orientation=vertical]:flex-col',\n 'data-[orientation=vertical]:w-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nconst StyledRange = styled(Range, {\n base: [\n 'bg-primary-800',\n 'rounded-full',\n 'h-full',\n 'absolute',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nconst StyledThumb = styled(Thumb, {\n base: [\n 'bg-primary-900',\n 'rounded-full',\n 'block',\n 'size-4',\n 'hover:bg-primary-1000',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-900',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n Value: typeof SliderValue\n Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n (\n {\n value,\n defaultValue,\n min = 0,\n max = 100,\n theme = 'tonal',\n className,\n children,\n ...remainingProps\n },\n ref\n ) => {\n const values = value || defaultValue\n return (\n <CSSWrapper className={className}>\n <StyledSlider\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n ref={ref}\n {...remainingProps}\n >\n <StyledTrack theme={theme}>\n <StyledRange />\n </StyledTrack>\n {values?.length &&\n values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n </StyledSlider>\n {children}\n </CSSWrapper>\n )\n }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;AASA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities/css-wrapper/CSSWrapper'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n base: [\n 'rounded-full',\n 'grow',\n 'relative',\n 'data-[orientation=horizontal]:h-1',\n 'data-[orientation=vertical]:w-1'\n ],\n variants: {\n theme: {\n light: ['bg-white'],\n tonal: ['bg-grey-600']\n }\n }\n})\n\nconst StyledSlider = styled(Root, {\n base: [\n 'items-center',\n 'flex',\n 'relative',\n 'touch-none',\n 'select-none',\n 'cursor-pointer',\n 'data-[orientation=horizontal]:h-4',\n 'data-[orientation=vertical]:flex-col',\n 'data-[orientation=vertical]:w-4',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nconst StyledRange = styled(Range, {\n base: [\n 'bg-primary-800',\n 'rounded-full',\n 'h-full',\n 'absolute',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nconst StyledThumb = styled(Thumb, {\n base: [\n 'bg-primary-900',\n 'rounded-full',\n 'block',\n 'size-4',\n 'hover:bg-primary-1000',\n 'focus:outline-2',\n 'focus:outline-offset-2',\n 'focus:outline-primary-900',\n 'focus:outline-solid',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\ntype SliderType = ReturnType<\n typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n Value: typeof SliderValue\n Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n (\n {\n value,\n defaultValue,\n min = 0,\n max = 100,\n theme = 'tonal',\n className,\n children,\n ...remainingProps\n },\n ref\n ) => {\n const values = value || defaultValue\n return (\n <CSSWrapper className={className}>\n <StyledSlider\n defaultValue={defaultValue}\n value={value}\n min={min}\n max={max}\n ref={ref}\n {...remainingProps}\n >\n <StyledTrack theme={theme}>\n <StyledRange />\n </StyledTrack>\n {values?.length &&\n values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n </StyledSlider>\n {children}\n </CSSWrapper>\n )\n }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;;;;AASA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAYD,IAAa,SAAS,QAAM,YAExB,EACE,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,kBAEL,QACG;CACH,MAAM,SAAS,SAAS;CACxB,OACE,wBAAA,cAAC,YAAD,EAAuB,UAgBX,GAfV,wBAAA,cAAC,cAAD;EACgB;EACP;EACF;EACA;EACA;EACL,GAAI;CAOQ,GALZ,wBAAA,cAAC,aAAD,EAAoB,MAEP,GADX,wBAAA,cAAC,aAAA,IAAa,CACH,GACZ,QAAQ,UACP,OAAO,KAAK,GAAG,MAAM,wBAAA,cAAC,aAAD,EAAa,KAAK,QAAQ,IAAM,CAAA,CAAC,CAC5C,GACb,QACS;AAEhB,CACF;AAEA,OAAO,QAAQ;AACf,OAAO,QAAQ;AAEf,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n min: number\n max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n const percentage = getPercentValue(value, min, max)\n\n if (percentage <= 10) return 0\n if (percentage >= 90) return 100\n return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n if (steps.length === 0) return null\n\n return (\n <div className=\"relative mt-3 h-3 w-full\">\n {steps.map((step) => (\n <Text\n as=\"span\"\n key={step.value}\n style={{\n '--left': `${getPercentValue(step.value, min, max)}%`,\n '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n }}\n className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n >\n {step.label}\n </Text>\n ))}\n </div>\n )\n}\n"],"mappings":";;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;
|
|
1
|
+
{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n min: number\n max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n const percentage = getPercentValue(value, min, max)\n\n if (percentage <= 10) return 0\n if (percentage >= 90) return 100\n return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n if (steps.length === 0) return null\n\n return (\n <div className=\"relative mt-3 h-3 w-full\">\n {steps.map((step) => (\n <Text\n as=\"span\"\n key={step.value}\n style={{\n '--left': `${getPercentValue(step.value, min, max)}%`,\n '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n }}\n className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n >\n {step.label}\n </Text>\n ))}\n </div>\n )\n}\n"],"mappings":";;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,wBAAA,cAAC,OAAD,EAAK,WAAU,2BAcV,GAbF,MAAM,KAAK,SACV,wBAAA,cAAC,MAAD;EACE,IAAG;EACH,KAAK,KAAK;EACV,OAAO;GACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;GACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;EAC/D;EACA,WAAU;CAGN,GADH,KAAK,KACF,CACP,CACE;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n value?: number[]\n}\n\nexport const SliderValue = ({\n value = [],\n outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n return (\n <Text className=\"text-grey-700 mt-4 w-full\">\n {outputLabel(value.length === 1 ? value[0] : value)}\n </Text>\n )\n}\n"],"mappings":";;;AAYA,IAAa,eAAe,EAC1B,QAAQ,
|
|
1
|
+
{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n value?: number[]\n}\n\nexport const SliderValue = ({\n value = [],\n outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n return (\n <Text className=\"text-grey-700 mt-4 w-full\">\n {outputLabel(value.length === 1 ? value[0] : value)}\n </Text>\n )\n}\n"],"mappings":";;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cACvB;CACtB,OACE,wBAAA,cAAC,MAAD,EAAM,WAAU,4BAEV,GADH,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK,CAC9C;AAEV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n SliderStepsType &\n SliderValueType &\n FieldElementWrapperProps\n\nexport const SliderField = ({\n className,\n hideLabel,\n label,\n name,\n defaultValue,\n value,\n validation,\n outputLabel,\n min = 0,\n max = 100,\n steps = [],\n ...remainingProps\n}: SliderFieldProps) => {\n const { control } = useFormContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (value?.length) onChange(value)\n }, [JSON.stringify(value)])\n\n return (\n <FieldWrapper\n className={className}\n fieldId={name}\n label={label}\n hideLabel={hideLabel}\n >\n <Slider\n ref={ref}\n name={innerName}\n onValueChange={onChange}\n value={innerValue}\n min={min}\n max={max}\n {...remainingProps}\n >\n <Slider.Steps min={min} max={max} steps={steps} />\n\n <Slider.Value value={innerValue} outputLabel={outputLabel} />\n </Slider>\n </FieldWrapper>\n )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,
|
|
1
|
+
{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { Slider, SliderProps } from '~/components/slider/Slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n SliderStepsType &\n SliderValueType &\n FieldElementWrapperProps\n\nexport const SliderField = ({\n className,\n hideLabel,\n label,\n name,\n defaultValue,\n value,\n validation,\n outputLabel,\n min = 0,\n max = 100,\n steps = [],\n ...remainingProps\n}: SliderFieldProps) => {\n const { control } = useFormContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (value?.length) onChange(value)\n }, [JSON.stringify(value)])\n\n return (\n <FieldWrapper\n className={className}\n fieldId={name}\n label={label}\n hideLabel={hideLabel}\n >\n <Slider\n ref={ref}\n name={innerName}\n onValueChange={onChange}\n value={innerValue}\n min={min}\n max={max}\n {...remainingProps}\n >\n <Slider.Steps min={min} max={max} steps={steps} />\n\n <Slider.Value value={innerValue} outputLabel={outputLabel} />\n </Slider>\n </FieldWrapper>\n )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;AAiBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,qBACmB;CACtB,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAED,MAAM,gBAAgB;EAEpB,IAAI,OAAO,QAAQ,SAAS,KAAK;CACnC,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;CAE1B,OACE,sBAAA,cAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;CAeC,GAbZ,sBAAA,cAAC,QAAD;EACO;EACL,MAAM;EACN,eAAe;EACf,OAAO;EACF;EACA;EACL,GAAI;CAKE,GAHN,sBAAA,cAAC,OAAO,OAAR;EAAmB;EAAU;EAAY;CAAQ,CAAA,GAEjD,sBAAA,cAAC,OAAO,OAAR;EAAc,OAAO;EAAyB;CAAc,CAAA,CACtD,CACI;AAElB;AAEA,YAAY,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n base: [\n 'text-inherit!',\n 'fill-current',\n 'disabled:**:pointer-events-none',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n isDragging: {\n true: ['cursor-grabbing'],\n false: ['cursor-grab']\n }\n }\n})\n\nexport type THandleProps = Omit<\n React.ComponentProps<typeof StyledHandle>,\n 'children'\n> &\n Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n ({ isDragging, size, ...rest }, ref) => {\n return (\n <StyledHandle\n ref={ref}\n isDragging={isDragging}\n appearance=\"simple\"\n hasTooltip={false}\n size={size}\n {...rest}\n >\n <Icon is={DragHandle} />\n </StyledHandle>\n )\n }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"Handle.js","names":[],"sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n base: [\n 'text-inherit!',\n 'fill-current',\n 'disabled:**:pointer-events-none',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30'\n ],\n variants: {\n isDragging: {\n true: ['cursor-grabbing'],\n false: ['cursor-grab']\n }\n }\n})\n\nexport type THandleProps = Omit<\n React.ComponentProps<typeof StyledHandle>,\n 'children'\n> &\n Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n ({ isDragging, size, ...rest }, ref) => {\n return (\n <StyledHandle\n ref={ref}\n isDragging={isDragging}\n appearance=\"simple\"\n hasTooltip={false}\n size={size}\n {...rest}\n >\n <Icon is={DragHandle} />\n </StyledHandle>\n )\n }\n)\n\nHandle.displayName = 'Handle'\n"],"mappings":";;;;;;AAQA,IAAa,eAAe,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,MAAM,CAAC,iBAAiB;EACxB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAQD,IAAa,SAAS,QAAM,YACzB,EAAE,YAAY,MAAM,GAAG,QAAQ,QAAQ;CACtC,OACE,wBAAA,cAAC,cAAD;EACO;EACO;EACZ,YAAW;EACX,YAAY;EACN;EACN,GAAI;CAGQ,GADZ,wBAAA,cAAC,MAAD,EAAM,IAAI,WAAa,CAAA,CACX;AAElB,CACF;AAEA,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n targetId: React.ReactText\n disabled?: boolean\n label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n targetId,\n disabled = false,\n label = 'drag handle',\n ...rest\n}: TSortableHandleProps) => {\n const { attributes, listeners, isDragging, setActivatorNodeRef } =\n useSortable({ id: targetId })\n\n return (\n <DragHandle\n ref={setActivatorNodeRef}\n isDragging={isDragging}\n label={label}\n disabled={disabled}\n {...(!disabled ? listeners : {})}\n {...(!disabled ? attributes : {})}\n {...rest}\n />\n )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n targetId: React.ReactText\n disabled?: boolean\n label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n targetId,\n disabled = false,\n label = 'drag handle',\n ...rest\n}: TSortableHandleProps) => {\n const { attributes, listeners, isDragging, setActivatorNodeRef } =\n useSortable({ id: targetId })\n\n return (\n <DragHandle\n ref={setActivatorNodeRef}\n isDragging={isDragging}\n label={label}\n disabled={disabled}\n {...(!disabled ? listeners : {})}\n {...(!disabled ? attributes : {})}\n {...rest}\n />\n )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"mappings":";;;;AAWA,IAAa,kBAAkB,EAC7B,UACA,WAAW,OACX,QAAQ,eACR,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,WAAW,YAAY,wBACzC,YAAY,EAAE,IAAI,SAAS,CAAC;CAE9B,OACE,wBAAA,cAAC,QAAD;EACE,KAAK;EACO;EACL;EACG;EACV,GAAK,CAAC,WAAW,YAAY,CAAC;EAC9B,GAAK,CAAC,WAAW,aAAa,CAAC;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport type TSortableItemProps = {\n id: UniqueIdentifier\n asChild?: boolean\n isDragHandle?: boolean\n disabled?: boolean\n className?: string\n style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n id,\n asChild = false,\n className,\n style,\n isDragHandle = false,\n disabled,\n ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n const { transform, setNodeRef, isDragging, listeners, attributes } =\n useSortable({ id })\n\n const Component = asChild ? Slot : 'div'\n return (\n <Component\n ref={setNodeRef}\n style={{\n ...style,\n '--scale': 1,\n '--translate-x': transform?.x || 0,\n '--translate-y': transform?.y || 0\n }}\n data-dragging={isDragging}\n data-disabled={disabled}\n {...(isDragHandle && !disabled ? listeners : {})}\n {...(isDragHandle && !disabled ? attributes : {})}\n {...rest}\n className={cn(\n 'translate-x-[calc(var(--translate-x)*1px)]',\n 'translate-y-[calc(var(--translate-y)*1px)]',\n 'scale-(--scale)',\n isDragging && 'z-5',\n 'disabled:**:pointer-events-none',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n className\n )}\n />\n )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAgBA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"SortableItem.js","names":[],"sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nexport type TSortableItemProps = {\n id: UniqueIdentifier\n asChild?: boolean\n isDragHandle?: boolean\n disabled?: boolean\n className?: string\n style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n id,\n asChild = false,\n className,\n style,\n isDragHandle = false,\n disabled,\n ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n const { transform, setNodeRef, isDragging, listeners, attributes } =\n useSortable({ id })\n\n const Component = asChild ? Slot : 'div'\n return (\n <Component\n ref={setNodeRef}\n style={{\n ...style,\n '--scale': 1,\n '--translate-x': transform?.x || 0,\n '--translate-y': transform?.y || 0\n }}\n data-dragging={isDragging}\n data-disabled={disabled}\n {...(isDragHandle && !disabled ? listeners : {})}\n {...(isDragHandle && !disabled ? attributes : {})}\n {...rest}\n className={cn(\n 'translate-x-[calc(var(--translate-x)*1px)]',\n 'translate-y-[calc(var(--translate-y)*1px)]',\n 'scale-(--scale)',\n isDragging && 'z-5',\n 'disabled:**:pointer-events-none',\n 'disabled:cursor-not-allowed',\n 'disabled:opacity-30',\n isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n className\n )}\n />\n )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"mappings":";;;;;AAgBA,IAAa,gBAAgB,EAC3B,IACA,UAAU,OACV,WACA,OACA,eAAe,OACf,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,WAAW,YAAY,YAAY,WAAW,eACpD,YAAY,EAAE,GAAG,CAAC;CAEpB,MAAM,YAAY,UAAU,OAAO;CACnC,OACE,wBAAA,cAAC,WAAD;EACE,KAAK;EACL,OAAO;GACL,GAAG;GACH,WAAW;GACX,iBAAiB,WAAW,KAAK;GACjC,iBAAiB,WAAW,KAAK;EACnC;EACA,iBAAe;EACf,iBAAe;EACf,GAAK,gBAAgB,CAAC,WAAW,YAAY,CAAC;EAC9C,GAAK,gBAAgB,CAAC,WAAW,aAAa,CAAC;EAC/C,GAAI;EACJ,WAAW,GACT,8CACA,8CACA,mBACA,cAAc,OACd,mCACA,+BACA,uBACA,iBAAiB,aAAa,oBAAoB,gBAClD,SACF;CACD,CAAA;AAEL;AAEA,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors\n} from '@dnd-kit/core'\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n sortableIds: React.ReactText[]\n onSortChange: (onSortChangeData: {\n order: UniqueIdentifier[]\n oldIndex: number\n newIndex: number\n }) => void\n}\n\nexport const SortableRoot = ({\n sortableIds,\n onSortChange,\n children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n React.useEffect(() => {\n setOrder(sortableIds)\n }, [sortableIds])\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates\n })\n )\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event\n if (active.id && over?.id && active.id !== over?.id) {\n setOrder((order) => {\n const oldIndex = order.indexOf(active.id)\n const newIndex = order.indexOf(over.id)\n const newOrder = arrayMove(order, oldIndex, newIndex)\n onSortChange({ order: newOrder, oldIndex, newIndex })\n return newOrder\n })\n }\n }\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n >\n <SortableContext items={order}>{children}</SortableContext>\n </DndContext>\n )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA4B,
|
|
1
|
+
{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors\n} from '@dnd-kit/core'\nimport {\n arrayMove,\n SortableContext,\n sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n sortableIds: React.ReactText[]\n onSortChange: (onSortChangeData: {\n order: UniqueIdentifier[]\n oldIndex: number\n newIndex: number\n }) => void\n}\n\nexport const SortableRoot = ({\n sortableIds,\n onSortChange,\n children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n React.useEffect(() => {\n setOrder(sortableIds)\n }, [sortableIds])\n\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates\n })\n )\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event\n if (active.id && over?.id && active.id !== over?.id) {\n setOrder((order) => {\n const oldIndex = order.indexOf(active.id)\n const newIndex = order.indexOf(over.id)\n const newOrder = arrayMove(order, oldIndex, newIndex)\n onSortChange({ order: newOrder, oldIndex, newIndex })\n return newOrder\n })\n }\n }\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragEnd={handleDragEnd}\n >\n <SortableContext items={order}>{children}</SortableContext>\n </DndContext>\n )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACiD;CACjD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA4B,WAAW;CACvE,QAAM,gBAAgB;EACpB,SAAS,WAAW;CACtB,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,wBAAA,cAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;CAGD,GADV,wBAAA,cAAC,iBAAD,EAAiB,OAAO,MAAkC,GAA1B,QAA0B,CAChD;AAEhB;AAEA,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;
|
|
1
|
+
{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,OAAO,OAAO,EAClC,MAAM;CAAC;CAAU;CAAwB;AAAc,EACzD,CAAC;AAED,OAAO,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nconst StepperComponent = ({\n children,\n stepCount,\n allowSkip,\n onComplete,\n onStepChange,\n direction = 'horizontal',\n steps,\n hideLabels = false,\n showCompletedIcons = false,\n className\n}: React.PropsWithChildren<IStepperProps>) => {\n invariant(\n !(stepCount && steps),\n '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n )\n\n const count = steps?.length || stepCount || 0\n\n return (\n <StepperProvider\n stepCount={count}\n allowSkip={allowSkip}\n onComplete={onComplete}\n onStepChange={stepCount ? onStepChange : undefined}\n direction={direction}\n steps={steps || Array(count).fill('')}\n hideLabels={hideLabels}\n showCompletedIcons={showCompletedIcons}\n >\n <div aria-label=\"progress\" className={cn('w-full', className)}>\n {children}\n </div>\n </StepperProvider>\n )\n}\n\nexport const Stepper = Object.assign(StepperComponent, {\n StepBack: StepperStepBack,\n StepForward: StepperStepForward,\n Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;
|
|
1
|
+
{"version":3,"file":"Stepper.js","names":[],"sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nconst StepperComponent = ({\n children,\n stepCount,\n allowSkip,\n onComplete,\n onStepChange,\n direction = 'horizontal',\n steps,\n hideLabels = false,\n showCompletedIcons = false,\n className\n}: React.PropsWithChildren<IStepperProps>) => {\n invariant(\n !(stepCount && steps),\n '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n )\n\n const count = steps?.length || stepCount || 0\n\n return (\n <StepperProvider\n stepCount={count}\n allowSkip={allowSkip}\n onComplete={onComplete}\n onStepChange={stepCount ? onStepChange : undefined}\n direction={direction}\n steps={steps || Array(count).fill('')}\n hideLabels={hideLabels}\n showCompletedIcons={showCompletedIcons}\n >\n <div aria-label=\"progress\" className={cn('w-full', className)}>\n {children}\n </div>\n </StepperProvider>\n )\n}\n\nexport const Stepper = Object.assign(StepperComponent, {\n StepBack: StepperStepBack,\n StepForward: StepperStepForward,\n Steps: StepperSteps\n})\n\nStepperComponent.displayName = 'Stepper'\n"],"mappings":";;;;;;;;AAWA,IAAM,oBAAoB,EACxB,UACA,WACA,WACA,YACA,cACA,YAAY,cACZ,OACA,aAAa,OACb,qBAAqB,OACrB,gBAC4C;CAC5C,UACE,EAAE,aAAa,QACf,6IACF;CAEA,MAAM,QAAQ,OAAO,UAAU,aAAa;CAE5C,OACE,wBAAA,cAAC,iBAAD;EACE,WAAW;EACA;EACC;EACZ,cAAc,YAAY,eAAe,KAAA;EAC9B;EACX,OAAO,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;EACxB;EACQ;CAKL,GAHf,wBAAA,cAAC,OAAD;EAAK,cAAW;EAAW,WAAW,GAAG,UAAU,SAAS;CAEvD,GADF,QACE,CACU;AAErB;AAEA,IAAa,UAAU,OAAO,OAAO,kBAAkB;CACrD,UAAU;CACV,aAAa;CACb,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n label,\n children,\n ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n const { activeStep, goToPreviousStep } = useStepper()\n return (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n {...rest}\n disabled={activeStep === 0}\n onClick={goToPreviousStep}\n >\n {children || label?.(activeStep)}\n </Button>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,
|
|
1
|
+
{"version":3,"file":"StepperStepBack.js","names":[],"sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack = ({\n label,\n children,\n ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button>) => {\n const { activeStep, goToPreviousStep } = useStepper()\n return (\n <Button\n size=\"sm\"\n appearance=\"outline\"\n {...rest}\n disabled={activeStep === 0}\n onClick={goToPreviousStep}\n >\n {children || label?.(activeStep)}\n </Button>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,mBAAmB,EAC9B,OACA,UACA,GAAG,WAC8D;CACjE,MAAM,EAAE,YAAY,qBAAqB,WAAW;CACpD,OACE,wBAAA,cAAC,QAAD;EACE,MAAK;EACL,YAAW;EACX,GAAI;EACJ,UAAU,eAAe;EACzB,SAAS;CAGH,GADL,YAAY,QAAQ,UAAU,CACzB;AAEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepBullet = styled('div', {\n base: [\n 'flex',\n 'relative',\n 'p-2',\n 'justify-center',\n 'items-center',\n 'size-8',\n 'rounded-[50%]',\n 'border-0',\n 'bg-grey-200',\n 'z-1',\n 'flex-none'\n ],\n variants: {\n status: {\n default: ['bg-grey-200', 'text-grey-700'],\n active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n completed: ['bg-primary-800', 'text-white'],\n reviewed: ['bg-primary-900', 'text-white'],\n success: ['bg-success', 'text-white']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepBullet = styled('div', {\n base: [\n 'flex',\n 'relative',\n 'p-2',\n 'justify-center',\n 'items-center',\n 'size-8',\n 'rounded-[50%]',\n 'border-0',\n 'bg-grey-200',\n 'z-1',\n 'flex-none'\n ],\n variants: {\n status: {\n default: ['bg-grey-200', 'text-grey-700'],\n active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n completed: ['bg-primary-800', 'text-white'],\n reviewed: ['bg-primary-900', 'text-white'],\n success: ['bg-success', 'text-white']\n }\n }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,eAAe;EACxC,QAAQ;GAAC;GAAY;GAAY;GAAkB;EAAkB;EACrE,QAAQ;GAAC;GAAY;GAAY;GAAmB;EAAgB;EACpE,WAAW,CAAC,kBAAkB,YAAY;EAC1C,UAAU,CAAC,kBAAkB,YAAY;EACzC,SAAS,CAAC,cAAc,YAAY;CACtC,EACF;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepContainer = styled('div', {\n base: [\n 'flex',\n 'relative',\n 'font-body',\n 'font-semibold',\n 'text-md',\n 'items-center',\n 'not-last:after:absolute',\n \"not-last:after:content-['']\",\n 'focus-visible:outline-none'\n ],\n variants: {\n canInteract: {\n true: []\n },\n direction: {\n vertical: [\n 'flex-row',\n 'not-last:after:h-full',\n 'not-last:after:left-3.5',\n 'not-last:after:top-1/2',\n 'not-last:after:w-1',\n 'py-3'\n ],\n horizontal: [\n 'flex-col',\n 'not-last:after:h-1',\n 'not-last:after:left-1/2',\n 'not-last:after:top-3.5',\n 'not-last:after:w-full',\n 'px-2'\n ]\n },\n separator: {\n default: ['not-last:after:bg-grey-200'],\n active: ['not-last:after:bg-primary-800'],\n success: ['not-last:after:bg-success'],\n viewed: ['not-last:after:bg-grey-600']\n },\n status: {\n completed: [],\n active: [],\n default: [],\n viewed: [],\n success: [],\n reviewed: []\n }\n },\n compoundVariants: [\n {\n canInteract: true,\n status: 'completed',\n class: [\n 'focus-visible:first:outline-2',\n 'focus-visible:first:outline-offset-2',\n 'focus-visible:first:outline-primary-800',\n 'focus-visible:first:outline-solid',\n 'hover:first:bg-primary-900',\n 'hover:first:text-white!',\n 'hover:last:text-primary-900'\n ]\n },\n {\n canInteract: true,\n status: 'active',\n class: [\n 'focus-visible:first:outline-2',\n 'focus-visible:first:outline-offset-2',\n 'focus-visible:first:outline-primary-800',\n 'focus-visible:first:outline-solid',\n 'hover:first:border-grey-800',\n 'hover:first:text-grey-1000',\n 'hover:last:text-grey-1000'\n ]\n },\n {\n canInteract: true,\n status: 'viewed',\n class: [\n 'focus-visible:first:outline-2!',\n 'focus-visible:first:outline-offset-2!',\n 'focus-visible:first:outline-primary-800!',\n 'focus-visible:first:outline-solid!',\n 'hover:first:border-grey-800',\n 'hover:first:text-grey-1000',\n 'hover:last:text-grey-1000'\n ]\n },\n {\n canInteract: true,\n status: 'reviewed',\n class: [\n 'focus-visible:first:outline-2!',\n 'focus-visible:first:outline-offset-2!',\n 'focus-visible:first:outline-primary-800!',\n 'focus-visible:first:outline-solid!'\n ]\n }\n ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const StepperStepContainer = styled('div', {\n base: [\n 'flex',\n 'relative',\n 'font-body',\n 'font-semibold',\n 'text-md',\n 'items-center',\n 'not-last:after:absolute',\n \"not-last:after:content-['']\",\n 'focus-visible:outline-none'\n ],\n variants: {\n canInteract: {\n true: []\n },\n direction: {\n vertical: [\n 'flex-row',\n 'not-last:after:h-full',\n 'not-last:after:left-3.5',\n 'not-last:after:top-1/2',\n 'not-last:after:w-1',\n 'py-3'\n ],\n horizontal: [\n 'flex-col',\n 'not-last:after:h-1',\n 'not-last:after:left-1/2',\n 'not-last:after:top-3.5',\n 'not-last:after:w-full',\n 'px-2'\n ]\n },\n separator: {\n default: ['not-last:after:bg-grey-200'],\n active: ['not-last:after:bg-primary-800'],\n success: ['not-last:after:bg-success'],\n viewed: ['not-last:after:bg-grey-600']\n },\n status: {\n completed: [],\n active: [],\n default: [],\n viewed: [],\n success: [],\n reviewed: []\n }\n },\n compoundVariants: [\n {\n canInteract: true,\n status: 'completed',\n class: [\n 'focus-visible:first:outline-2',\n 'focus-visible:first:outline-offset-2',\n 'focus-visible:first:outline-primary-800',\n 'focus-visible:first:outline-solid',\n 'hover:first:bg-primary-900',\n 'hover:first:text-white!',\n 'hover:last:text-primary-900'\n ]\n },\n {\n canInteract: true,\n status: 'active',\n class: [\n 'focus-visible:first:outline-2',\n 'focus-visible:first:outline-offset-2',\n 'focus-visible:first:outline-primary-800',\n 'focus-visible:first:outline-solid',\n 'hover:first:border-grey-800',\n 'hover:first:text-grey-1000',\n 'hover:last:text-grey-1000'\n ]\n },\n {\n canInteract: true,\n status: 'viewed',\n class: [\n 'focus-visible:first:outline-2!',\n 'focus-visible:first:outline-offset-2!',\n 'focus-visible:first:outline-primary-800!',\n 'focus-visible:first:outline-solid!',\n 'hover:first:border-grey-800',\n 'hover:first:text-grey-1000',\n 'hover:last:text-grey-1000'\n ]\n },\n {\n canInteract: true,\n status: 'reviewed',\n class: [\n 'focus-visible:first:outline-2!',\n 'focus-visible:first:outline-offset-2!',\n 'focus-visible:first:outline-primary-800!',\n 'focus-visible:first:outline-solid!'\n ]\n }\n ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,+BAA+B;GACxC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,4BAA4B;EACvC;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n label,\n children,\n onClick,\n ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n const { goToNextStep, activeStep } = useStepper()\n\n const handleClick = () => {\n if (onClick) {\n return onClick(() => goToNextStep?.())\n }\n goToNextStep?.()\n }\n\n return (\n <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n {children || label?.(activeStep)}\n </Button>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACuE;CAC1E,MAAM,EAAE,cAAc,eAAe,
|
|
1
|
+
{"version":3,"file":"StepperStepForward.js","names":[],"sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n label,\n children,\n onClick,\n ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n const { goToNextStep, activeStep } = useStepper()\n\n const handleClick = () => {\n if (onClick) {\n return onClick(() => goToNextStep?.())\n }\n goToNextStep?.()\n }\n\n return (\n <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n {children || label?.(activeStep)}\n </Button>\n )\n}\n"],"mappings":";;;;AAMA,IAAa,sBAAsB,EACjC,OACA,UACA,SACA,GAAG,WACuE;CAC1E,MAAM,EAAE,cAAc,eAAe,WAAW;CAEhD,MAAM,oBAAoB;EACxB,IAAI,SACF,OAAO,cAAc,eAAe,CAAC;EAEvC,eAAe;CACjB;CAEA,OACE,wBAAA,cAAC,QAAD;EAAQ,MAAK;EAAK,GAAI;EAAM,SAAS;EAAa,WAAU;CAEpD,GADL,YAAY,QAAQ,UAAU,CACzB;AAEZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n base: ['font-semibold'],\n variants: {\n direction: {\n vertical: ['ml-3', 'text-left'],\n horizontal: ['mt-3', 'text-center']\n },\n status: {\n default: ['font-normal', 'text-grey-700'],\n active: ['text-primary-900'],\n viewed: ['text-grey-1000'],\n completed: ['text-primary-800'],\n success: ['text-success'],\n reviewed: []\n }\n }\n})\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n base: ['font-semibold'],\n variants: {\n direction: {\n vertical: ['ml-3', 'text-left'],\n horizontal: ['mt-3', 'text-center']\n },\n status: {\n default: ['font-normal', 'text-grey-700'],\n active: ['text-primary-900'],\n viewed: ['text-grey-1000'],\n completed: ['text-primary-800'],\n success: ['text-success'],\n reviewed: []\n }\n }\n})\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,kBAAkB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,WAAW,CAAC,kBAAkB;GAC9B,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}
|