@atom-learning/components 6.0.0-beta.40 → 6.0.0-beta.42
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/carousel/CarouselSlider.js.map +1 -1
- package/dist/components/list/List.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/skeleton-loader/Skeleton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonButton.js +1 -1
- package/dist/components/skeleton-loader/SkeletonButton.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonCard.d.ts +5 -0
- package/dist/components/skeleton-loader/SkeletonCard.js +2 -0
- package/dist/components/skeleton-loader/SkeletonCard.js.map +1 -0
- package/dist/components/skeleton-loader/SkeletonDoughnutChart.d.ts +4 -0
- package/dist/components/skeleton-loader/SkeletonDoughnutChart.js +2 -0
- package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map +1 -0
- package/dist/components/skeleton-loader/SkeletonHeading.js +1 -1
- package/dist/components/skeleton-loader/SkeletonHeading.js.map +1 -1
- package/dist/components/skeleton-loader/SkeletonTable.d.ts +7 -0
- package/dist/components/skeleton-loader/SkeletonTable.js +2 -0
- package/dist/components/skeleton-loader/SkeletonTable.js.map +1 -0
- package/dist/components/skeleton-loader/SkeletonTabs.js +1 -1
- package/dist/components/skeleton-loader/SkeletonTabs.js.map +1 -1
- package/dist/components/skeleton-loader/index.d.ts +3 -0
- package/dist/components/skeleton-loader/index.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js +1 -1
- package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
- package/dist/components/table/useStickyColumnsCss.js +1 -1
- package/dist/components/table/useStickyColumnsCss.js.map +1 -1
- package/dist/components/tree/TreeList.js +1 -1
- package/dist/components/tree/TreeList.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselSlider.js","sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren
|
|
1
|
+
{"version":3,"file":"CarouselSlider.js","sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Slider as BaseSlider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nexport const CarouselSlider = ({\n children,\n className,\n overflow,\n ...rest\n}: React.PropsWithChildren<\n typeof BaseSlider & {\n tabIndex?: number\n className?: string\n overflow?: boolean\n }\n>) => (\n <BaseSlider\n {...rest}\n className={\n String.raw`ml-[50%] -translate-x-1/2 cursor-grab overflow-hidden **:[[class*=slideInner]]:flex **:[[class*=slideInner]]:justify-center **:[[class*=slide\\_]]:float-left **:[[class*=slide\\_]]:pb-0! **:[[class*=sliderTray\\_]]:transition-transform **:[[class*=sliderTray\\_]]:duration-500 **:[[class*=sliderTray\\_]]:ease-[cubic-bezier(.645,.045,.355,1)] ` +\n clsx(overflow && 'overflow-visible', className)\n }\n >\n {children}\n </BaseSlider>\n)\n"],"names":["CarouselSlider","children","className","overflow","rest","React","BaseSlider","clsx"],"mappings":"yFAIO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAOEC,EAAA,cAACC,EAAA,CACE,GAAGF,EACJ,UACE,OAAO,wVACPG,EAAKJ,GAAY,mBAAoBD,CAAS,GAG/CD,CACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n base: ['list-inside', 'font-body'],\n variants: {\n size: {\n xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n ordered: {\n true: ['pl-4'
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const StyledLi = styled('li', {\n base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n base: ['list-inside', 'font-body'],\n variants: {\n size: {\n xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n },\n noCapsize: {\n true: ['before:hidden!', 'after:hidden!']\n },\n ordered: {\n true: [\n 'pl-4',\n 'list-decimal',\n '[&_>_li]:pl-1',\n '[&_>_li::marker]:font-medium',\n '[&_>_li::marker]:text-sm'\n ],\n false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n },\n theme: {\n primary: ['marker:text-primary-800']\n }\n }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n ordered?: boolean\n}\n\ntype ListType = ReturnType<\n typeof React.forwardRef<HTMLUListElement, ListProps>\n> & {\n Item: typeof StyledLi\n}\n\nexport const List = React.forwardRef<HTMLUListElement, ListProps>(\n (\n { size = 'md', noCapsize = true, ordered = false, ...remainingProps },\n ref\n ) => (\n <StyledList\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n ordered={ordered}\n size={size}\n noCapsize={noCapsize}\n {...remainingProps}\n />\n )\n) as ListType\n\nList.Item = StyledLi\n"],"names":["StyledLi","styled","StyledList","List","React","size","noCapsize","ordered","remainingProps","ref"],"mappings":"iEAIa,MAAAA,EAAWC,EAAO,KAAM,CACnC,KAAM,CAAC,YAAa,eAAe,CACrC,CAAC,EAEYC,EAAaD,EAAO,KAAM,CACrC,KAAM,CAAC,cAAe,WAAW,EACjC,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,CACtD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,QAAS,CACP,KAAM,CACJ,OACA,eACA,gBACA,+BACA,0BACF,EACA,MAAO,CAAC,OAAQ,YAAa,eAAe,CAC9C,EACA,MAAO,CACL,QAAS,CAAC,yBAAyB,CACrC,CACF,CACF,CAAC,EAYYE,EAAOC,EAAM,WACxB,CACE,CAAE,KAAAC,EAAO,KAAM,UAAAC,EAAY,GAAM,QAAAC,EAAU,GAAO,GAAGC,CAAe,EACpEC,IAEAL,EAAA,cAACF,EACC,CAAA,IAAKO,EACL,GAAIF,EAAU,KAAO,KACrB,QAASA,EACT,KAAMF,EACN,UAAWC,EACV,GAAGE,CAAAA,CACN,CAEJ,EAEAL,EAAK,KAAOH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../skeleton-loader/Skeleton.js";import"clsx";import"../tile/Tile.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../
|
|
1
|
+
import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../skeleton-loader/Skeleton.js";import"clsx";import"../tile/Tile.js";import"../skeleton-loader/SkeletonDoughnutChart.js";import"../table/Table.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:a,labels:i}=d(),p=Array.from({length:a},(o,l)=>l+1),[n,m]=t.useState(!1);return t.createElement(r,{open:n,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,className:"p-0"},t.createElement(g,{className:"flex flex-wrap justify-center gap-1 p-4"},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
|
|
2
2
|
//# sourceMappingURL=PaginationPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <Flex className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} className=\"p-0\">\n <Flex className=\"flex flex-wrap justify-center gap-1 p-4\">\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"2tIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAAA,EAC3DC,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,UAAU,KAAA,EAC3DD,EAAA,cAACK,EAAA,CAAK,UAAU,yCACbV,EAAAA,GAAA,YAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,CAAA,CAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Skeleton.js","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"],"names":["SkeletonLoader","styled"],"mappings":"yCAEa,MAAAA,EAAiBC,EAAO,MAAO,CAC1C,KAAM,CAAC,cAAe,UAAW,mBAAmB,CACtD,CAAC,EAEDD,EAAe,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from"react";import{SkeletonLoader as
|
|
1
|
+
import o from"clsx";import t from"react";import{SkeletonLoader as m}from"./Skeleton.js";const r=({className:e})=>t.createElement(m,{className:o("w-[10rem]","h-8","rounded-sm",e)});export{r as SkeletonButton};
|
|
2
2
|
//# sourceMappingURL=SkeletonButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonButton.js","sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\
|
|
1
|
+
{"version":3,"file":"SkeletonButton.js","sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n <SkeletonLoader\n className={clsx('w-[10rem]', 'h-8', 'rounded-sm', className)}\n />\n)\n"],"names":["SkeletonButton","className","React","SkeletonLoader","clsx"],"mappings":"wFAKa,MAAAA,EAAiB,CAAC,CAC7B,UAAAC,CACF,IAGEC,EAAA,cAACC,EAAA,CACC,UAAWC,EAAK,YAAa,MAAO,aAAcH,CAAS,CAC7D,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e from"react";import{Flex as l}from"../flex/Flex.js";import{Tile as a}from"../tile/Tile.js";import{SkeletonLoader as n}from"./Skeleton.js";import{SkeletonButton as c}from"./SkeletonButton.js";import{SkeletonDoughnutChart as i}from"./SkeletonDoughnutChart.js";const f=({numberOfRows:r=3,withChart:o})=>e.createElement(a,{className:"relative w-full flex-col items-center gap-6 p-6"},e.createElement(l,{gap:"6",align:"center",className:"w-full"},o&&e.createElement(i,null),e.createElement(l,{direction:"column",gap:"24",className:"grow"},Array.from({length:r},(t,m)=>m).map(t=>e.createElement(n,{key:t,className:"bg-grey-200 h-10 w-full min-w-25 rounded-lg"})))),e.createElement(c,null));export{f as SkeletonCard};
|
|
2
|
+
//# sourceMappingURL=SkeletonCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonCard.js","sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Flex } from '../flex'\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n numberOfRows = 3,\n withChart\n}: {\n numberOfRows?: number\n withChart?: boolean\n}) => (\n <Tile className=\"relative w-full flex-col items-center gap-6 p-6\">\n <Flex gap=\"6\" align=\"center\" className=\"w-full\">\n {withChart && <SkeletonDoughnutChart />}\n <Flex direction=\"column\" gap=\"24\" className=\"grow\">\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-lg\"\n />\n )\n )}\n </Flex>\n </Flex>\n <SkeletonButton />\n </Tile>\n)\n"],"names":["SkeletonCard","numberOfRows","withChart","React","Tile","Flex","SkeletonDoughnutChart","_","index","rowNumber","SkeletonLoader","SkeletonButton"],"mappings":"gRAQaA,EAAe,CAAC,CAC3B,aAAAC,EAAe,EACf,UAAAC,CACF,IAIEC,EAAA,cAACC,EAAA,CAAK,UAAU,mDACdD,EAAA,cAACE,EAAA,CAAK,IAAI,IAAI,MAAM,SAAS,UAAU,QACpCH,EAAAA,GAAaC,EAAA,cAACG,EAAA,IAAsB,EACrCH,EAAA,cAACE,EAAA,CAAK,UAAU,SAAS,IAAI,KAAK,UAAU,MAAA,EACzC,MAAM,KAAK,CAAE,OAAQJ,CAAa,EAAG,CAACM,EAAGC,IAAUA,CAAK,EAAE,IACxDC,GACCN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,UAAU,6CAAA,CACZ,CAEJ,CACF,CACF,EACAN,EAAA,cAACQ,EAAA,IAAe,CAClB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import a from"clsx";import e from"react";import{styled as l}from"../../styled.js";import{Tile as r}from"../tile/Tile.js";import"../flex/Flex.js";const m=l("svg",{base:["animate-[shimmer]","duration-2000","ease-in-out","delay-500","repeat-infinite"]}),f=()=>e.createElement(m,{xmlns:"http://www.w3.org/2000/svg",width:120,height:121,fill:"none"},e.createElement("mask",{id:"a",fill:"#fff"},e.createElement("path",{d:"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z"})),e.createElement("path",{className:"fill-grey-300",stroke:"#fff",strokeWidth:1.6,d:"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z",mask:"url(#a)"}),e.createElement("mask",{id:"b",fill:"#fff"},e.createElement("path",{d:"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z"})),e.createElement("path",{className:"fill-grey-300",stroke:"#fff",strokeWidth:1.6,d:"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z",mask:"url(#b)"}),e.createElement("mask",{id:"c",fill:"#fff"},e.createElement("path",{d:"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z"})),e.createElement("path",{className:"fill-grey-300",stroke:"#fff",strokeWidth:1.6,d:"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z",mask:"url(#c)"}),e.createElement("mask",{id:"d",fill:"#fff"},e.createElement("path",{d:"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z"})),e.createElement("path",{className:"fill-grey-300",stroke:"#fff",strokeWidth:1.6,d:"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z",mask:"url(#d)"}),e.createElement("mask",{id:"e",fill:"#fff"},e.createElement("path",{d:"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z"})),e.createElement("path",{className:"fill-grey-300",stroke:"#fff",strokeWidth:1.6,d:"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z",mask:"url(#e)"})),s=({containerCss:t})=>e.createElement(r,{className:a("p-6","flex-row","gap-4","relative",t)},e.createElement(f,null));export{s as SkeletonDoughnutChart};
|
|
2
|
+
//# sourceMappingURL=SkeletonDoughnutChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonDoughnutChart.js","sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tile } from '../tile'\n\nconst StyledSvg = styled('svg', {\n base: [\n 'animate-[shimmer]',\n 'duration-2000',\n 'ease-in-out',\n 'delay-500',\n 'repeat-infinite'\n ]\n})\n\nconst DoughnutSvg = () => (\n <StyledSvg\n xmlns=\"http://www.w3.org/2000/svg\"\n width={120}\n height={121}\n fill=\"none\"\n >\n <mask id=\"a\" fill=\"#fff\">\n <path d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\" />\n </mask>\n <path\n className=\"fill-grey-300\"\n stroke=\"#fff\"\n strokeWidth={1.6}\n d=\"m117 60 3 3a60 60 0 0 1-39 53q-2 1-4-2l-5-17q-1-2 2-4a36 36 0 0 0 22-30q0-2 3-3z\"\n mask=\"url(#a)\"\n />\n <mask id=\"b\" fill=\"#fff\">\n <path d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\" />\n </mask>\n <path\n className=\"fill-grey-300\"\n stroke=\"#fff\"\n strokeWidth={1.6}\n d=\"M117 60q2 0 3-3A60 60 0 0 0 81 4l-4 2-5 17q-1 4 2 4a36 36 0 0 1 22 30q0 3 3 3z\"\n mask=\"url(#b)\"\n />\n <mask id=\"c\" fill=\"#fff\">\n <path d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\" />\n </mask>\n <path\n className=\"fill-grey-300\"\n stroke=\"#fff\"\n strokeWidth={1.6}\n d=\"M77 6q1-2-2-4a60 60 0 0 0-62 21q-1 2 1 4l14 10h5a36 36 0 0 1 35-12q3 1 4-2z\"\n mask=\"url(#c)\"\n />\n <mask id=\"d\" fill=\"#fff\">\n <path d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\" />\n </mask>\n <path\n className=\"fill-grey-300\"\n stroke=\"#fff\"\n strokeWidth={1.6}\n d=\"M14 93q-3 2-1 5a60 60 0 0 0 62 20l2-4-5-16-4-3a36 36 0 0 1-35-11q-3-3-5-1z\"\n mask=\"url(#d)\"\n />\n <mask id=\"e\" fill=\"#fff\">\n <path d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\" />\n </mask>\n <path\n className=\"fill-grey-300\"\n stroke=\"#fff\"\n strokeWidth={1.6}\n d=\"M14 27q-2-2-4 1a60 60 0 0 0 0 65q1 2 4 0l14-10q3-2 1-4a36 36 0 0 1 0-37q2-3-1-5z\"\n mask=\"url(#e)\"\n />\n </StyledSvg>\n)\n\nexport const SkeletonDoughnutChart = ({\n containerCss\n}: {\n containerCss?: string\n}) => (\n <Tile className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}>\n <DoughnutSvg />\n </Tile>\n)\n"],"names":["StyledSvg","styled","DoughnutSvg","React","SkeletonDoughnutChart","containerCss","Tile","clsx"],"mappings":"iJAOA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,oBACA,gBACA,cACA,YACA,iBACF,CACF,CAAC,EAEKC,EAAc,IAClBC,EAAA,cAACH,EAAA,CACC,MAAM,6BACN,MAAO,IACP,OAAQ,IACR,KAAK,MAELG,EAAAA,EAAA,cAAC,OAAK,CAAA,GAAG,IAAI,KAAK,MAChBA,EAAAA,EAAA,cAAC,OAAK,CAAA,EAAE,mFAAmF,CAC7F,EACAA,EAAA,cAAC,OAAA,CACC,UAAU,gBACV,OAAO,OACP,YAAa,IACb,EAAE,mFACF,KAAK,SAAA,CACP,EACAA,EAAA,cAAC,OAAK,CAAA,GAAG,IAAI,KAAK,QAChBA,EAAA,cAAC,QAAK,EAAE,gFAAA,CAAiF,CAC3F,EACAA,EAAA,cAAC,OAAA,CACC,UAAU,gBACV,OAAO,OACP,YAAa,IACb,EAAE,iFACF,KAAK,UACP,EACAA,EAAA,cAAC,OAAA,CAAK,GAAG,IAAI,KAAK,MAChBA,EAAAA,EAAA,cAAC,OAAK,CAAA,EAAE,8EAA8E,CACxF,EACAA,EAAA,cAAC,OACC,CAAA,UAAU,gBACV,OAAO,OACP,YAAa,IACb,EAAE,8EACF,KAAK,SAAA,CACP,EACAA,EAAA,cAAC,OAAA,CAAK,GAAG,IAAI,KAAK,QAChBA,EAAA,cAAC,QAAK,EAAE,4EAAA,CAA6E,CACvF,EACAA,EAAA,cAAC,QACC,UAAU,gBACV,OAAO,OACP,YAAa,IACb,EAAE,6EACF,KAAK,SAAA,CACP,EACAA,EAAA,cAAC,OAAK,CAAA,GAAG,IAAI,KAAK,MAAA,EAChBA,EAAA,cAAC,OAAA,CAAK,EAAE,kFAAA,CAAmF,CAC7F,EACAA,EAAA,cAAC,OAAA,CACC,UAAU,gBACV,OAAO,OACP,YAAa,IACb,EAAE,mFACF,KAAK,SAAA,CACP,CACF,EAGWC,EAAwB,CAAC,CACpC,aAAAC,CACF,IAGEF,EAAA,cAACG,EAAA,CAAK,UAAWC,EAAK,MAAO,WAAY,QAAS,WAAYF,CAAY,GACxEF,EAAA,cAACD,EAAA,IAAY,CACf"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from"react";import{SkeletonLoader as
|
|
1
|
+
import o from"clsx";import r from"react";import{SkeletonLoader as t}from"./Skeleton.js";const m=({className:e})=>r.createElement(t,{className:o("w-64","h-6","rounded-2xl",e)});export{m as SkeletonHeading};
|
|
2
2
|
//# sourceMappingURL=SkeletonHeading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonHeading.js","sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\
|
|
1
|
+
{"version":3,"file":"SkeletonHeading.js","sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({\n className\n}: {\n className?: React.ComponentProps<typeof SkeletonLoader>['className']\n}) => (\n <SkeletonLoader className={clsx('w-64', 'h-6', 'rounded-2xl', className)} />\n)\n"],"names":["SkeletonHeading","className","React","SkeletonLoader","clsx"],"mappings":"wFAKa,MAAAA,EAAkB,CAAC,CAC9B,UAAAC,CACF,IAGEC,EAAA,cAACC,EAAA,CAAe,UAAWC,EAAK,OAAQ,MAAO,cAAeH,CAAS,CAAG,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const SkeletonTable: ({ numberOfColumns, numberOfRows, columnWidth, containerCss }: {
|
|
3
|
+
numberOfColumns?: number;
|
|
4
|
+
numberOfRows?: number;
|
|
5
|
+
columnWidth?: Record<number, string>;
|
|
6
|
+
containerCss?: string;
|
|
7
|
+
}) => React.JSX.Element;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import c from"clsx";import e from"react";import{Table as m}from"../table/Table.js";import{Tile as s}from"../tile/Tile.js";import"../flex/Flex.js";import{SkeletonLoader as o}from"./Skeleton.js";const p=({numberOfColumns:a=4,numberOfRows:n=4,columnWidth:l,containerCss:d})=>e.createElement(s,{className:c("p-6","flex-row","gap-4","relative",d)},e.createElement(m,{size:"md"},e.createElement(m.Header,{theme:"white"},Array.from({length:a},(t,r)=>r).map(t=>e.createElement(m.HeaderCell,{key:t},e.createElement(o,{style:{"--width":(l==null?void 0:l[t])||"100px"},className:"h-4 w-(--width) rounded-2xl"})))),e.createElement(m.Body,{striped:!1},Array.from({length:n},(t,r)=>r).map(t=>e.createElement(m.Row,{key:t},Array.from({length:a},(r,i)=>i).map(r=>e.createElement(m.Cell,{key:r,className:"border-none"},e.createElement(o,{style:{"--width":(l==null?void 0:l[r])||"100px"},className:"bg-grey-200 h-4 w-(--width) rounded-2xl"}))))))));export{p as SkeletonTable};
|
|
2
|
+
//# sourceMappingURL=SkeletonTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SkeletonTable.js","sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Table } from '../table'\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n numberOfColumns = 4,\n numberOfRows = 4,\n columnWidth,\n containerCss\n}: {\n numberOfColumns?: number\n numberOfRows?: number\n columnWidth?: Record<number, string>\n containerCss?: string\n}) => {\n return (\n <Tile\n className={clsx('p-6', 'flex-row', 'gap-4', 'relative', containerCss)}\n >\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-2xl\"\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-2xl\"\n />\n </Table.Cell>\n ))}\n </Table.Row>\n )\n )}\n </Table.Body>\n </Table>\n </Tile>\n )\n}\n"],"names":["SkeletonTable","numberOfColumns","numberOfRows","columnWidth","containerCss","React","Tile","clsx","Table","_","index","columnIndex","SkeletonLoader","rowIndex"],"mappings":"iMAOa,MAAAA,EAAgB,CAAC,CAC5B,gBAAAC,EAAkB,EAClB,aAAAC,EAAe,EACf,YAAAC,EACA,aAAAC,CACF,IAOIC,EAAA,cAACC,EAAA,CACC,UAAWC,EAAK,MAAO,WAAY,QAAS,WAAYH,CAAY,CAEpEC,EAAAA,EAAA,cAACG,EAAA,CAAM,KAAK,IAAA,EACVH,EAAA,cAACG,EAAM,OAAN,CAAa,MAAM,OACjB,EAAA,MAAM,KAAK,CAAE,OAAQP,CAAgB,EAAG,CAACQ,EAAGC,IAAUA,CAAK,EAAE,IAC3DC,GACCN,EAAA,cAACG,EAAM,WAAN,CAAiB,IAAKG,CAAAA,EACrBN,EAAA,cAACO,EAAA,CACC,MAAO,CAAE,WAAWT,GAAA,YAAAA,EAAcQ,CAAAA,IAAgB,OAAQ,EAC1D,UAAU,6BACZ,CAAA,CACF,CAEJ,CACF,EACAN,EAAA,cAACG,EAAM,KAAN,CAAW,QAAS,EAClB,EAAA,MAAM,KAAK,CAAE,OAAQN,CAAa,EAAG,CAACO,EAAGC,IAAUA,CAAK,EAAE,IACxDG,GACCR,EAAA,cAACG,EAAM,IAAN,CAAU,IAAKK,GACb,MAAM,KACL,CAAE,OAAQZ,CAAgB,EAC1B,CAACQ,EAAGC,IAAUA,CAChB,EAAE,IAAKC,GACLN,EAAA,cAACG,EAAM,KAAN,CAAW,IAAKG,EAAa,UAAU,aACtCN,EAAAA,EAAA,cAACO,EAAA,CACC,MAAO,CACL,WAAWT,GAAA,KAAA,OAAAA,EAAcQ,CAAgB,IAAA,OAC3C,EACA,UAAU,0CACZ,CACF,CACD,CACH,CAEJ,CACF,CACF,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{SkeletonLoader as n}from"./Skeleton.js";
|
|
1
|
+
import r from"clsx";import o from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{SkeletonLoader as n}from"./Skeleton.js";const p=({numberOfTabs:t,containerCss:m,tabCss:a})=>o.createElement(l,{className:r("p-6","flex-row","gap-4",m)},Array.from({length:t},(e,s)=>`tab_${s}`).map(e=>o.createElement(n,{key:e,className:r("w-32","h-6","rounded-sm",a)})));export{p as SkeletonTabs};
|
|
2
2
|
//# sourceMappingURL=SkeletonTabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SkeletonTabs.js","sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\
|
|
1
|
+
{"version":3,"file":"SkeletonTabs.js","sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n numberOfTabs,\n containerCss,\n tabCss\n}: {\n numberOfTabs: number\n containerCss?: string\n tabCss?: string\n}) => (\n <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n {Array.from({ length: numberOfTabs }, (_, index) => `tab_${index}`).map(\n (key) => (\n <SkeletonLoader\n key={key}\n className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n />\n )\n )}\n </Tile>\n)\n"],"names":["SkeletonTabs","numberOfTabs","containerCss","tabCss","React","Tile","clsx","_","index","key","SkeletonLoader"],"mappings":"uJAMa,MAAAA,EAAe,CAAC,CAC3B,aAAAC,EACA,aAAAC,EACA,OAAAC,CACF,IAKEC,EAAA,cAACC,EAAA,CAAK,UAAWC,EAAK,MAAO,WAAY,QAASJ,CAAY,CAC3D,EAAA,MAAM,KAAK,CAAE,OAAQD,CAAa,EAAG,CAACM,EAAGC,IAAU,OAAOA,CAAK,EAAE,EAAE,IACjEC,GACCL,EAAA,cAACM,EAAA,CACC,IAAKD,EACL,UAAWH,EAAK,OAAQ,MAAO,aAAcH,CAAM,CAAA,CACrD,CAEJ,CACF"}
|
|
@@ -2,3 +2,6 @@ export { SkeletonLoader as Loader } from './Skeleton';
|
|
|
2
2
|
export { SkeletonHeading as Heading } from './SkeletonHeading';
|
|
3
3
|
export { SkeletonButton as Button } from './SkeletonButton';
|
|
4
4
|
export { SkeletonTabs as Tabs } from './SkeletonTabs';
|
|
5
|
+
export { SkeletonDoughnutChart as DoughnutChart } from './SkeletonDoughnutChart';
|
|
6
|
+
export { SkeletonTable as Table } from './SkeletonTable';
|
|
7
|
+
export { SkeletonCard as Card } from './SkeletonCard';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{SkeletonLoader as t}from"./Skeleton.js";import{SkeletonHeading as
|
|
1
|
+
import{SkeletonLoader as t}from"./Skeleton.js";import{SkeletonHeading as a}from"./SkeletonHeading.js";import{SkeletonButton as l}from"./SkeletonButton.js";import{SkeletonTabs as f}from"./SkeletonTabs.js";import{SkeletonDoughnutChart as m}from"./SkeletonDoughnutChart.js";import{SkeletonTable as x}from"./SkeletonTable.js";import{SkeletonCard as d}from"./SkeletonCard.js";export{l as Button,d as Card,m as DoughnutChart,a as Heading,t as Loader,x as Table,f as Tabs};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"clsx";import e from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:h,numberOfStickyColumns:t=0,className:n,...l})=>{const[_,f]=e.useState(!1),p=e.useRef(null),{columnsStyle:s}=i({numberOfStickyColumns:t,wrapperRef:p});return e.createElement("div",{onScroll:y=>{const o=y.currentTarget.scrollLeft>0;o!==_&&f(o)},role:"scrollbar",ref:p,style:s,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",n,t
|
|
1
|
+
import c from"clsx";import e from"react";import{useStickyColumnsStyle as i}from"./useStickyColumnsCss.js";const r=({children:h,numberOfStickyColumns:t=0,className:n,...l})=>{const[_,f]=e.useState(!1),p=e.useRef(null),{columnsStyle:s}=i({numberOfStickyColumns:t,wrapperRef:p});return e.createElement("div",{onScroll:y=>{const o=y.currentTarget.scrollLeft>0;o!==_&&f(o)},role:"scrollbar",ref:p,style:s,className:c("overflow-auto","max-w-full","relative","overscroll-x-contain","[&_td,&_th]:bg-inherit",n,t>=1&&["[&_td,&_th]:nth-of-type-[1]:sticky","[&_td,&_th]:nth-of-type-[1]:left-(--sticky-offset-left-1)","[&_td,&_th]:nth-of-type-[1]:w-(--sticky-column-width-1)","[&_td,&_th]:nth-of-type-[1]:z-2"],t>=2&&["[&_td,&_th]:nth-of-type-[2]:sticky","[&_td,&_th]:nth-of-type-[2]:left-(--sticky-offset-left-2)","[&_td,&_th]:nth-of-type-[2]:w-(--sticky-column-width-2)","[&_td,&_th]:nth-of-type-[2]:z-2"],t>=3&&["[&_td,&_th]:nth-of-type-[3]:sticky","[&_td,&_th]:nth-of-type-[3]:left-(--sticky-offset-left-3)","[&_td,&_th]:nth-of-type-[3]:w-(--sticky-column-width-3)","[&_td,&_th]:nth-of-type-[3]:z-2"],t>=4&&["[&_td,&_th]:nth-of-type-[4]:sticky","[&_td,&_th]:nth-of-type-[4]:left-(--sticky-offset-left-4)","[&_td,&_th]:nth-of-type-[4]:w-(--sticky-column-width-4)","[&_td,&_th]:nth-of-type-[4]:z-2"],t===1&&_&&["[&_td,&_th]:nth-of-type-[1]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[1]:[clip-path:inset(0px_-10px_0px_0px)]"],t===2&&_&&["[&_td,&_th]:nth-of-type-[2]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[2]:[clip-path:inset(0px_-10px_0px_0px)]"],t===3&&_&&["[&_td,&_th]:nth-of-type-[3]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[3]:[clip-path:inset(0px_-10px_0px_0px)]"],t===4&&_&&["[&_td,&_th]:nth-of-type-[4]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td,&_th]:nth-of-type-[4]:[clip-path:inset(0px_-10px_0px_0px)]"]),...l},h)};export{r as TableStickyColumnsContainer};
|
|
2
2
|
//# sourceMappingURL=TableStickyColumnsContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns
|
|
1
|
+
{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsStyle } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n className,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n className?: string\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsStyle } = useStickyColumnsStyle({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <div\n onScroll={handleScroll}\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n role=\"scrollbar\"\n ref={wrapperRef}\n style={columnsStyle}\n className={clsx(\n 'overflow-auto',\n 'max-w-full',\n 'relative',\n 'overscroll-x-contain',\n '[&_td,&_th]:bg-inherit',\n className,\n numberOfStickyColumns >= 1 && [\n '[&_td,&_th]:nth-of-type-[1]:sticky',\n '[&_td,&_th]:nth-of-type-[1]:left-(--sticky-offset-left-1)',\n '[&_td,&_th]:nth-of-type-[1]:w-(--sticky-column-width-1)',\n '[&_td,&_th]:nth-of-type-[1]:z-2'\n ],\n numberOfStickyColumns >= 2 && [\n '[&_td,&_th]:nth-of-type-[2]:sticky',\n '[&_td,&_th]:nth-of-type-[2]:left-(--sticky-offset-left-2)',\n '[&_td,&_th]:nth-of-type-[2]:w-(--sticky-column-width-2)',\n '[&_td,&_th]:nth-of-type-[2]:z-2'\n ],\n numberOfStickyColumns >= 3 && [\n '[&_td,&_th]:nth-of-type-[3]:sticky',\n '[&_td,&_th]:nth-of-type-[3]:left-(--sticky-offset-left-3)',\n '[&_td,&_th]:nth-of-type-[3]:w-(--sticky-column-width-3)',\n '[&_td,&_th]:nth-of-type-[3]:z-2'\n ],\n numberOfStickyColumns >= 4 && [\n '[&_td,&_th]:nth-of-type-[4]:sticky',\n '[&_td,&_th]:nth-of-type-[4]:left-(--sticky-offset-left-4)',\n '[&_td,&_th]:nth-of-type-[4]:w-(--sticky-column-width-4)',\n '[&_td,&_th]:nth-of-type-[4]:z-2'\n ],\n numberOfStickyColumns === 1 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[1]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[1]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 2 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[2]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[2]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 3 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[3]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[3]:[clip-path:inset(0px_-10px_0px_0px)]'\n ],\n numberOfStickyColumns === 4 &&\n hasScroll && [\n '[&_td,&_th]:nth-of-type-[4]:shadow-[var(--color-alpha-200)_-2px_-3px_9px_1px]',\n '[&_td,&_th]:nth-of-type-[4]:[clip-path:inset(0px_-10px_0px_0px)]'\n ]\n )}\n {...restProps}\n >\n {children}\n </div>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsStyle","useStickyColumnsStyle","event","newHasScroll","clsx"],"mappings":"0GAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,aAAAE,CAAa,EAAIC,EAAsB,CAC7C,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MAAA,CACC,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAMI,KAAK,YACL,IAAKJ,EACL,MAAOC,EACP,UAAWI,EACT,gBACA,aACA,WACA,uBACA,yBACAV,EACAD,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,GAAyB,GAAK,CAC5B,qCACA,4DACA,0DACA,iCACF,EACAA,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,EACFH,IAA0B,GACxBG,GAAa,CACX,gFACA,kEACF,CACJ,EACC,GAAGD,CAAAA,EAEHH,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as c from"react";const
|
|
1
|
+
import*as c from"react";const d=({numberOfStickyColumns:e,wrapperRef:r})=>{const[i,f]=c.useState({}),l=c.useCallback(()=>{var t;let s=0;const o=(t=r.current)==null?void 0:t.querySelectorAll("th");return Array.from(o||[]).slice(0,e).reduce((m,y,u)=>{const n=u+1,a={...m,[`--sticky-column-width-${n}`]:`${y.offsetWidth}px`,[`--sticky-offset-left-${n}`]:`${s}px`};return s+=(o==null?void 0:o.item(u).clientWidth)||0,a},{})},[e,r]);return c.useLayoutEffect(()=>{if(!e)return;const t=l();f(t)},[e,r,l]),{columnsStyle:i}};export{d as useStickyColumnsStyle};
|
|
2
2
|
//# sourceMappingURL=useStickyColumnsCss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n string\n>\n\ninterface IUseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = React.useCallback(() => {\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"names":["useStickyColumnsStyle","numberOfStickyColumns","wrapperRef","columnsStyle","setColumnsStyle","React","generateColumnsStyle","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","styleObject","newColumnsStyle"],"mappings":"wBAWa,MAAAA,EAAwB,CAAC,CACpC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAM,SAAsB,
|
|
1
|
+
{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ntype ColumnStyle = Record<\n `--sticky-column-width-${number}` | `--sticky-offset-left-${number}`,\n string\n>\n\ninterface IUseStickyColumnsCss {\n columnsStyle?: ColumnStyle\n}\n\nexport const useStickyColumnsStyle = ({\n numberOfStickyColumns,\n wrapperRef\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n const [columnsStyle, setColumnsStyle] = React.useState<ColumnStyle>({})\n\n const generateColumnsStyle = React.useCallback(() => {\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsStyle = stickyColumns.reduce((acc, column, index) => {\n const elementNumber = index + 1\n const styleObject = {\n ...acc,\n [`--sticky-column-width-${elementNumber}`]: `${column.offsetWidth}px`,\n [`--sticky-offset-left-${elementNumber}`]: `${accWidth}px`\n }\n\n accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n return styleObject\n }, {})\n\n return newColumnsStyle\n }, [numberOfStickyColumns, wrapperRef])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsStyle = generateColumnsStyle()\n\n setColumnsStyle(newColumnsStyle)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsStyle])\n\n return {\n columnsStyle\n }\n}\n"],"names":["useStickyColumnsStyle","numberOfStickyColumns","wrapperRef","columnsStyle","setColumnsStyle","React","generateColumnsStyle","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","styleObject","newColumnsStyle"],"mappings":"wBAWa,MAAAA,EAAwB,CAAC,CACpC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAM,SAAsB,EAAE,EAEhEC,EAAuBD,EAAM,YAAY,IAAM,CApBvD,IAAAE,EAqBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAmB9D,OAlB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAElC,OAAO,CAACS,EAAKC,EAAQC,IAAU,CACnE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAc,CAClB,GAAGJ,EACH,CAAC,yBAAyBG,CAAa,EAAE,EAAG,GAAGF,EAAO,WAAW,KACjE,CAAC,wBAAwBE,CAAa,EAAE,EAAG,GAAGL,CAAQ,IACxD,EAEA,OAAAA,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAE,CAAA,CAGP,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAkBT,EAAqB,EAE7CF,EAAgBW,CAAe,CACjC,EAAG,CAACd,EAAuBC,EAAYI,CAAoB,CAAC,EAErD,CACL,aAAAH,CACF,CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Flex as t}from"../flex/Flex.js";import{styled as l}from"../../styled.js";const m=l(t,{base:["w-full","p-0","m-0","list-none","
|
|
1
|
+
import*as e from"react";import{Flex as t}from"../flex/Flex.js";import{styled as l}from"../../styled.js";const m=l(t,{base:["w-full","p-0","m-0","list-none","[&_&]:pl-4"]}),i=e.forwardRef((o,r)=>e.createElement(m,{as:"ul",ref:r,...o,direction:"column"}));export{i as TreeList};
|
|
2
2
|
//# sourceMappingURL=TreeList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeList.js","sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\n\nconst StyledList = styled(Flex, {\n base: ['w-full', 'p-0', 'm-0', 'list-none', '
|
|
1
|
+
{"version":3,"file":"TreeList.js","sources":["../../../src/components/tree/TreeList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\n\nconst StyledList = styled(Flex, {\n base: ['w-full', 'p-0', 'm-0', 'list-none', '[&_&]:pl-4']\n})\n\ntype TreeListProps = Omit<React.ComponentProps<typeof Flex>, 'direction'>\n\nexport const TreeList = React.forwardRef<HTMLElement, TreeListProps>(\n (props, ref) => (\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore: Stitches polymorphic components issue due to `as=\"ul\"`\n <StyledList as=\"ul\" ref={ref} {...props} direction=\"column\" />\n )\n)\n"],"names":["StyledList","styled","Flex","TreeList","React","props","ref"],"mappings":"wGAKA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,SAAU,MAAO,MAAO,YAAa,YAAY,CAC1D,CAAC,EAIYC,EAAWC,EAAM,WAC5B,CAACC,EAAOC,IAGNF,EAAA,cAACJ,EAAA,CAAW,GAAG,KAAK,IAAKM,EAAM,GAAGD,EAAO,UAAU,SAAS,CAEhE"}
|