Showing preview only (4,453K chars total). Download the full file or copy to clipboard to get everything.
Repository: shinokada/svelte-5-ui-lib
Branch: main
Commit: ee2fb30c22cb
Files: 2139
Total size: 3.8 MB
Directory structure:
gitextract_vlhoivw6/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── License
├── README.md
├── e2e/
│ ├── alert.test.ts
│ ├── components.test.ts
│ ├── forms.test.ts
│ ├── home.test.ts
│ ├── other.test.ts
│ └── typography.test.ts
├── eslint.config.js
├── package.json
├── playwright.config.ts
├── scripts/
│ └── generateFileList.ts
├── src/
│ ├── app.css
│ ├── app.d.ts
│ ├── app.html
│ ├── demo.spec.ts
│ ├── generatedFileList.ts
│ ├── lib/
│ │ ├── accordion/
│ │ │ ├── Accordion.svelte
│ │ │ ├── AccordionItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── alert/
│ │ │ ├── Alert.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── avatar/
│ │ │ ├── Avatar.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── badge/
│ │ │ ├── Badge.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── banner/
│ │ │ ├── Banner.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── bottom-navigation/
│ │ │ ├── BottomNav.svelte
│ │ │ ├── BottomNavHeader.svelte
│ │ │ ├── BottomNavHeaderItem.svelte
│ │ │ ├── BottomNavItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── breadcrumb/
│ │ │ ├── Breadcrumb.svelte
│ │ │ ├── BreadcrumbItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── buttongroup/
│ │ │ ├── ButtonGroup.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── buttons/
│ │ │ ├── Button.svelte
│ │ │ ├── GradientButton.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── cards/
│ │ │ ├── Card.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── chart/
│ │ │ ├── Chart.svelte
│ │ │ ├── chart.css
│ │ │ ├── index.ts
│ │ │ └── type.ts
│ │ ├── darkmode/
│ │ │ ├── Darkmode.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── device-mockups/
│ │ │ ├── Android.svelte
│ │ │ ├── DefaultMockup.svelte
│ │ │ ├── Desktop.svelte
│ │ │ ├── DeviceMockup.svelte
│ │ │ ├── Ios.svelte
│ │ │ ├── Laptop.svelte
│ │ │ ├── Smartwatch.svelte
│ │ │ ├── Tablet.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── drawer/
│ │ │ ├── Drawer.svelte
│ │ │ ├── Drawerhead.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── dropdown/
│ │ │ ├── Dropdown.svelte
│ │ │ ├── DropdownDivider.svelte
│ │ │ ├── DropdownFooter.svelte
│ │ │ ├── DropdownHeader.svelte
│ │ │ ├── DropdownLi.svelte
│ │ │ ├── DropdownUl.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── footer/
│ │ │ ├── Footer.svelte
│ │ │ ├── FooterBrand.svelte
│ │ │ ├── FooterCopyright.svelte
│ │ │ ├── FooterIcon.svelte
│ │ │ ├── FooterLi.svelte
│ │ │ ├── FooterUl.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── forms/
│ │ │ ├── checkbox/
│ │ │ │ ├── Checkbox.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── checkbox-button/
│ │ │ │ ├── CheckboxButton.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── dropzone/
│ │ │ │ ├── Dropzone.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── fileupload/
│ │ │ │ ├── Fileupload.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── floating-label-input/
│ │ │ │ ├── FloatingLabelInput.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── helper/
│ │ │ │ ├── Helper.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── input/
│ │ │ │ ├── Input.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── input-addon/
│ │ │ │ ├── InputAddon.svelte
│ │ │ │ ├── index.ts
│ │ │ │ └── type.ts
│ │ │ ├── label/
│ │ │ │ ├── Label.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── radio/
│ │ │ │ ├── Radio.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── radio-button/
│ │ │ │ ├── RadioButton.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── range/
│ │ │ │ ├── Range.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── search/
│ │ │ │ ├── Search.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── select/
│ │ │ │ ├── Select.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── textarea/
│ │ │ │ ├── Textarea.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ └── toggle/
│ │ │ ├── Toggle.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── gallery/
│ │ │ ├── Gallery.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── index.ts
│ │ ├── indicator/
│ │ │ ├── Indicator.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── kbd/
│ │ │ ├── Kbd.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── list-group/
│ │ │ ├── Listgroup.svelte
│ │ │ ├── ListgroupItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── mega-menu/
│ │ │ ├── MegaMenu.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── modal/
│ │ │ ├── Modal.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── nav/
│ │ │ ├── NavBrand.svelte
│ │ │ ├── NavHamburger.svelte
│ │ │ ├── NavLi.svelte
│ │ │ ├── NavUl.svelte
│ │ │ ├── Navbar.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── pagination/
│ │ │ ├── Pagination.svelte
│ │ │ ├── PaginationItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── popover/
│ │ │ ├── Popover.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── progress/
│ │ │ ├── Progressbar.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── rating/
│ │ │ ├── AdvancedRating.svelte
│ │ │ ├── CustomIcon.svelte
│ │ │ ├── Heart.svelte
│ │ │ ├── Rating.svelte
│ │ │ ├── RatingComment.svelte
│ │ │ ├── Review.svelte
│ │ │ ├── ScoreRating.svelte
│ │ │ ├── Star.svelte
│ │ │ ├── Thumbup.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── sidebar/
│ │ │ ├── Sidebar.svelte
│ │ │ ├── SidebarBrand.svelte
│ │ │ ├── SidebarButton.svelte
│ │ │ ├── SidebarCta.svelte
│ │ │ ├── SidebarDropdownWrapper.svelte
│ │ │ ├── SidebarGroup.svelte
│ │ │ ├── SidebarItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── skeleton/
│ │ │ ├── CardPlaceholder.svelte
│ │ │ ├── ImagePlaceholder.svelte
│ │ │ ├── ListPlaceholder.svelte
│ │ │ ├── Skeleton.svelte
│ │ │ ├── TestimonialPlaceholder.svelte
│ │ │ ├── TextPlaceholder.svelte
│ │ │ ├── VideoPlaceholder.svelte
│ │ │ ├── WidgetPlaceholder.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── spinner/
│ │ │ ├── Spinner.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── table/
│ │ │ ├── Table.svelte
│ │ │ ├── TableBody.svelte
│ │ │ ├── TableBodyCell.svelte
│ │ │ ├── TableBodyRow.svelte
│ │ │ ├── TableHead.svelte
│ │ │ ├── TableHeadCell.svelte
│ │ │ ├── TableSearch.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── tabs/
│ │ │ ├── TabItem.svelte
│ │ │ ├── Tabs.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── theme/
│ │ │ └── Theme.svelte
│ │ ├── timeline/
│ │ │ ├── Activity.svelte
│ │ │ ├── ActivityItem.svelte
│ │ │ ├── Group.svelte
│ │ │ ├── GroupItem.svelte
│ │ │ ├── Timeline.svelte
│ │ │ ├── TimelineItem.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── toast/
│ │ │ ├── Toast.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── toolbar/
│ │ │ ├── Toolbar.svelte
│ │ │ ├── ToolbarButton.svelte
│ │ │ ├── ToolbarGroup.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── tooltip/
│ │ │ ├── Tooltip.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── types.ts
│ │ ├── typography/
│ │ │ ├── anchor/
│ │ │ │ ├── A.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── blockquote/
│ │ │ │ ├── Blockquote.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── descriptionlist/
│ │ │ │ ├── DescriptionList.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── heading/
│ │ │ │ ├── Heading.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── hr/
│ │ │ │ ├── Hr.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── img/
│ │ │ │ ├── EnhancedImg.svelte
│ │ │ │ ├── Img.svelte
│ │ │ │ ├── ImgEnhanced.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── layout/
│ │ │ │ ├── Layout.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── list/
│ │ │ │ ├── Li.svelte
│ │ │ │ ├── List.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── mark/
│ │ │ │ ├── Mark.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── paragraph/
│ │ │ │ ├── P.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ ├── secondary/
│ │ │ │ ├── Secondary.svelte
│ │ │ │ ├── index.ts
│ │ │ │ ├── theme.ts
│ │ │ │ └── type.ts
│ │ │ └── span/
│ │ │ ├── Span.svelte
│ │ │ ├── index.ts
│ │ │ ├── theme.ts
│ │ │ └── type.ts
│ │ ├── uiHelpers.svelte.ts
│ │ ├── utils/
│ │ │ ├── CloseButton.svelte
│ │ │ ├── focusTrap.ts
│ │ │ └── index.ts
│ │ └── video/
│ │ ├── Video.svelte
│ │ ├── index.ts
│ │ └── type.ts
│ └── routes/
│ ├── +layout.server.ts
│ ├── +layout.svelte
│ ├── +page.svelte
│ ├── component-data/
│ │ ├── A.json
│ │ ├── Accordion.json
│ │ ├── AccordionItem.json
│ │ ├── Activity.json
│ │ ├── ActivityItem.json
│ │ ├── AdvancedRating.json
│ │ ├── Alert.json
│ │ ├── Android.json
│ │ ├── Avatar.json
│ │ ├── Badge.json
│ │ ├── Banner.json
│ │ ├── Blockquote.json
│ │ ├── BottomNav.json
│ │ ├── BottomNavHeader.json
│ │ ├── BottomNavHeaderItem.json
│ │ ├── BottomNavItem.json
│ │ ├── Breadcrumb.json
│ │ ├── BreadcrumbItem.json
│ │ ├── Button.json
│ │ ├── ButtonGroup.json
│ │ ├── Card.json
│ │ ├── CardPlaceholder.json
│ │ ├── Chart.json
│ │ ├── Checkbox.json
│ │ ├── CheckboxButton.json
│ │ ├── CloseButton.json
│ │ ├── CustomIcon.json
│ │ ├── Darkmode.json
│ │ ├── DefaultMockup.json
│ │ ├── DescriptionList.json
│ │ ├── Desktop.json
│ │ ├── DeviceMockup.json
│ │ ├── Drawer.json
│ │ ├── Drawerhead.json
│ │ ├── Dropdown.json
│ │ ├── DropdownDivider.json
│ │ ├── DropdownFooter.json
│ │ ├── DropdownHeader.json
│ │ ├── DropdownLi.json
│ │ ├── DropdownUl.json
│ │ ├── Dropzone.json
│ │ ├── EnhancedImg.json
│ │ ├── Fileupload.json
│ │ ├── FloatingLabelInput.json
│ │ ├── Footer.json
│ │ ├── FooterBrand.json
│ │ ├── FooterCopyright.json
│ │ ├── FooterIcon.json
│ │ ├── FooterLi.json
│ │ ├── FooterUl.json
│ │ ├── Gallery.json
│ │ ├── GradientButton.json
│ │ ├── Group.json
│ │ ├── GroupItem.json
│ │ ├── Heading.json
│ │ ├── Heart.json
│ │ ├── Helper.json
│ │ ├── Hr.json
│ │ ├── ImagePlaceholder.json
│ │ ├── Img.json
│ │ ├── ImgEnhanced.json
│ │ ├── Indicator.json
│ │ ├── Input.json
│ │ ├── InputAddon.json
│ │ ├── Ios.json
│ │ ├── Kbd.json
│ │ ├── Label.json
│ │ ├── Laptop.json
│ │ ├── Layout.json
│ │ ├── Li.json
│ │ ├── List.json
│ │ ├── ListPlaceholder.json
│ │ ├── Listgroup.json
│ │ ├── ListgroupItem.json
│ │ ├── Mark.json
│ │ ├── MegaMenu.json
│ │ ├── Modal.json
│ │ ├── NavBrand.json
│ │ ├── NavHamburger.json
│ │ ├── NavLi.json
│ │ ├── NavUl.json
│ │ ├── Navbar.json
│ │ ├── P.json
│ │ ├── Pagination.json
│ │ ├── PaginationItem.json
│ │ ├── Popover.json
│ │ ├── Progressbar.json
│ │ ├── Radio.json
│ │ ├── RadioButton.json
│ │ ├── Range.json
│ │ ├── Rating.json
│ │ ├── RatingComment.json
│ │ ├── Review.json
│ │ ├── ScoreRating.json
│ │ ├── Search.json
│ │ ├── Secondary.json
│ │ ├── Select.json
│ │ ├── Sidebar.json
│ │ ├── SidebarBrand.json
│ │ ├── SidebarButton.json
│ │ ├── SidebarCta.json
│ │ ├── SidebarDropdownWrapper.json
│ │ ├── SidebarGroup.json
│ │ ├── SidebarItem.json
│ │ ├── Skeleton.json
│ │ ├── Smartwatch.json
│ │ ├── Span.json
│ │ ├── Spinner.json
│ │ ├── Star.json
│ │ ├── TabItem.json
│ │ ├── Table.json
│ │ ├── TableBody.json
│ │ ├── TableBodyCell.json
│ │ ├── TableBodyRow.json
│ │ ├── TableHead.json
│ │ ├── TableHeadCell.json
│ │ ├── TableSearch.json
│ │ ├── Tablet.json
│ │ ├── Tabs.json
│ │ ├── TestimonialPlaceholder.json
│ │ ├── TextPlaceholder.json
│ │ ├── Textarea.json
│ │ ├── Thumbup.json
│ │ ├── Timeline.json
│ │ ├── TimelineItem.json
│ │ ├── Toast.json
│ │ ├── Toggle.json
│ │ ├── Toolbar.json
│ │ ├── ToolbarButton.json
│ │ ├── ToolbarGroup.json
│ │ ├── Tooltip.json
│ │ ├── Video.json
│ │ ├── VideoPlaceholder.json
│ │ ├── WidgetPlaceholder.json
│ │ ├── focusTrap.json
│ │ ├── index.json
│ │ ├── kisida.json
│ │ ├── theme.json
│ │ ├── types.json
│ │ └── uiHelpers.svelte.json
│ ├── components/
│ │ ├── accordion/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ArrowStyle.svelte
│ │ │ ├── Color.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── Flush.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── MultipleMode.svelte
│ │ │ ├── Nesting.svelte
│ │ │ ├── Open.svelte
│ │ │ ├── OpenMultiple.svelte
│ │ │ ├── Transitions.svelte
│ │ │ └── index.ts
│ │ ├── alert/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AdditionalContent.svelte
│ │ │ ├── AlertWithList.svelte
│ │ │ ├── CustomColor.svelte
│ │ │ ├── Event.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── avatar/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AvatarText.svelte
│ │ │ ├── AvatarWithTooltip.svelte
│ │ │ ├── DotIndicator.svelte
│ │ │ ├── Placeholder.svelte
│ │ │ ├── PlaceholderInitial.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Stacked.svelte
│ │ │ ├── UserDropdown.svelte
│ │ │ └── index.ts
│ │ ├── badge/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── BadgeWithIconOnly.svelte
│ │ │ ├── ButtonWithBadge.svelte
│ │ │ ├── DismissingWithCustomIcon.svelte
│ │ │ ├── DismissingWithEvents.svelte
│ │ │ ├── DynamicColor.svelte
│ │ │ ├── NotificationBadge.svelte
│ │ │ ├── OpeningBadge.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── banner/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── InformationBanner.svelte
│ │ │ ├── NewsletterSignupBanner.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── bottom-navigation/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AnimatedIcons.svelte
│ │ │ ├── ApplicationBar.svelte
│ │ │ ├── Border.svelte
│ │ │ ├── ButtonGroup.svelte
│ │ │ ├── Card.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── IconColor.svelte
│ │ │ ├── LinkAndActiveClass.svelte
│ │ │ ├── OverwritingActiveClass.svelte
│ │ │ ├── Pagination.svelte
│ │ │ └── index.ts
│ │ ├── breadcrumb/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Default.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── Solid.svelte
│ │ │ └── index.ts
│ │ ├── button/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ButtonWithIcon.svelte
│ │ │ ├── ButtonWithLabel.svelte
│ │ │ ├── Events.svelte
│ │ │ ├── IconButtons.svelte
│ │ │ ├── Loader.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── button-group/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── DualtoneGradient.svelte
│ │ │ ├── DualtoneGradientPill.svelte
│ │ │ ├── Events.svelte
│ │ │ ├── GradientShadow.svelte
│ │ │ ├── OutlineButtons.svelte
│ │ │ ├── PillButtons.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── StandardButtons.svelte
│ │ │ └── index.ts
│ │ ├── card/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── CallToActionCard.svelte
│ │ │ ├── CardWithActionButton.svelte
│ │ │ ├── CustomSize.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── carousel/
│ │ │ └── +page.svelte
│ │ ├── darkmode/
│ │ │ ├── +page.svelte
│ │ │ ├── examples/
│ │ │ │ ├── Default.svelte
│ │ │ │ ├── Icon.svelte
│ │ │ │ ├── Style.svelte
│ │ │ │ └── index.ts
│ │ │ └── md/
│ │ │ ├── initialtheme.md
│ │ │ └── setup.md
│ │ ├── device-mockup/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── drawer/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ContactForm.svelte
│ │ │ ├── DrawerNavigation.svelte
│ │ │ ├── FormElements.svelte
│ │ │ ├── Offset.svelte
│ │ │ ├── Onmouseenter.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── dropdown/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ActiveLink.svelte
│ │ │ ├── AvatarWithName.svelte
│ │ │ ├── Checkbox.svelte
│ │ │ ├── HelperText.svelte
│ │ │ ├── MenuIcon.svelte
│ │ │ ├── MultiLevel.svelte
│ │ │ ├── Navbar.svelte
│ │ │ ├── NotificationBell.svelte
│ │ │ ├── PlacementBottom.svelte
│ │ │ ├── PlacementLeft.svelte
│ │ │ ├── PlacementRight.svelte
│ │ │ ├── PlacementTop.svelte
│ │ │ ├── Radio.svelte
│ │ │ ├── Scrolling.svelte
│ │ │ ├── Search.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Toggle.svelte
│ │ │ ├── UserAvatar.svelte
│ │ │ └── index.ts
│ │ ├── footer/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Default.svelte
│ │ │ ├── Logo.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── SitemapLink.svelte
│ │ │ ├── SocialMedia.svelte
│ │ │ ├── Sticky.svelte
│ │ │ └── index.ts
│ │ ├── gallery/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── CustomImageRendering.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── FeaturedImage.svelte
│ │ │ ├── GalleryWithTag.svelte
│ │ │ ├── Heterogeneous.svelte
│ │ │ ├── MansoryGrid.svelte
│ │ │ ├── Quad.svelte
│ │ │ └── index.ts
│ │ ├── indicators/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Badge.svelte
│ │ │ ├── Count.svelte
│ │ │ ├── Legend.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Status.svelte
│ │ │ ├── Stepper.svelte
│ │ │ └── index.ts
│ │ ├── kbd/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ArrowKeys.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── InsideTable.svelte
│ │ │ ├── InsideText.svelte
│ │ │ ├── LetterKeys.svelte
│ │ │ └── index.ts
│ │ ├── list-group/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Advanced.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── WithButtons.svelte
│ │ │ ├── WithIcons.svelte
│ │ │ ├── WithLinks.svelte
│ │ │ └── index.ts
│ │ ├── mega-menu/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Default.svelte
│ │ │ ├── Icon.svelte
│ │ │ └── index.ts
│ │ ├── modal/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── CryptoWallet.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── DisableOutsideclose.svelte
│ │ │ ├── FooterSnippet.svelte
│ │ │ ├── Form.svelte
│ │ │ ├── HeaderSnippet.svelte
│ │ │ ├── Popup.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── navbar/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── BackgroundColor.svelte
│ │ │ ├── Breakpoint.svelte
│ │ │ ├── CtaButton.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── Dropdown.svelte
│ │ │ ├── SearchNavbar.svelte
│ │ │ ├── Sticky.svelte
│ │ │ ├── UserDropdown.svelte
│ │ │ └── index.ts
│ │ ├── pagination/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Default.svelte
│ │ │ ├── Event.svelte
│ │ │ ├── Icons.svelte
│ │ │ ├── PreviousAndNext.svelte
│ │ │ ├── PreviousAndNextWithIcons.svelte
│ │ │ ├── TableDataPagination.svelte
│ │ │ ├── TableDataWithIcons.svelte
│ │ │ └── index.ts
│ │ ├── popover/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── CompanyProfile.svelte
│ │ │ ├── Description.svelte
│ │ │ ├── ExternalReference.svelte
│ │ │ ├── Image.svelte
│ │ │ ├── Password.svelte
│ │ │ ├── Progress.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── TitleSlot.svelte
│ │ │ ├── UserProfile.svelte
│ │ │ └── index.ts
│ │ ├── progress/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── rating/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AdvancedRating.svelte
│ │ │ ├── AdvancedRatingAndIcon.svelte
│ │ │ ├── Count.svelte
│ │ │ ├── CustomIcon.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── RatingComment.svelte
│ │ │ ├── ReviewContent.svelte
│ │ │ ├── ScoreRating.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Star.svelte
│ │ │ ├── Text.svelte
│ │ │ └── index.ts
│ │ ├── sidebar/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ActiveClass.svelte
│ │ │ ├── AllOpen.svelte
│ │ │ ├── AnimatedIcons.svelte
│ │ │ ├── BrandingWithChildren.svelte
│ │ │ ├── CloseButton.svelte
│ │ │ ├── ContentSeparator.svelte
│ │ │ ├── Cta.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── DropdownTransition.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── LogoBranding.svelte
│ │ │ ├── Multilevel.svelte
│ │ │ ├── OverridingActive.svelte
│ │ │ ├── SingleSelection.svelte
│ │ │ ├── StaticPositioning.svelte
│ │ │ ├── UsingObject.svelte
│ │ │ └── index.ts
│ │ ├── skeleton/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── speed-dial/
│ │ │ └── +page.svelte
│ │ ├── spinner/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Button.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── table/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Cells.svelte
│ │ │ ├── Checkbox.svelte
│ │ │ ├── ClickDoubleClick.svelte
│ │ │ ├── FooterSlot.svelte
│ │ │ ├── HeadBodyItems.svelte
│ │ │ ├── HeaderSlot.svelte
│ │ │ ├── Hover.svelte
│ │ │ ├── NoBorder.svelte
│ │ │ ├── Overflow.svelte
│ │ │ ├── Search.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Shadow.svelte
│ │ │ ├── Striped.svelte
│ │ │ ├── TableCaption.svelte
│ │ │ ├── TableItems.svelte
│ │ │ └── index.ts
│ │ ├── tabs/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AnimatedIcons.svelte
│ │ │ ├── ComponentsInTabContents.svelte
│ │ │ ├── FullWidth.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── timeline/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ActivityLog.svelte
│ │ │ ├── DateFormat.svelte
│ │ │ ├── DefaultTimeline.svelte
│ │ │ ├── GroupedTimeline.svelte
│ │ │ ├── HorizontalTimeline.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── VerticalTimeline.svelte
│ │ │ └── index.ts
│ │ ├── toast/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── InteractiveToast.svelte
│ │ │ ├── PushNotification.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── ToastMessage.svelte
│ │ │ ├── UndoButton.svelte
│ │ │ └── index.ts
│ │ ├── tooltip/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ExternalControl.svelte
│ │ │ ├── ExternalReference.svelte
│ │ │ ├── Inline.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── ShowOnClick.svelte
│ │ │ └── index.ts
│ │ └── video/
│ │ ├── +page.svelte
│ │ └── examples/
│ │ └── Setup.svelte
│ ├── forms/
│ │ ├── checkbox/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Advanced.svelte
│ │ │ ├── Bordered.svelte
│ │ │ ├── Button.svelte
│ │ │ ├── Dropdown.svelte
│ │ │ ├── GroupVariable.svelte
│ │ │ ├── HorizontalList.svelte
│ │ │ ├── InlineLayout.svelte
│ │ │ ├── Link.svelte
│ │ │ ├── ListGroup.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Table.svelte
│ │ │ └── index.ts
│ │ ├── file-input/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Clearable.svelte
│ │ │ ├── Dropzone.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── floating-label/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── input-field/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AdvancedUsage.svelte
│ │ │ ├── Clearable.svelte
│ │ │ ├── ClickHandler.svelte
│ │ │ ├── Dropdown.svelte
│ │ │ ├── Form.svelte
│ │ │ ├── Group.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── Number.svelte
│ │ │ ├── Search.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── label/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── radio/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AdvancedLayout.svelte
│ │ │ ├── Bordered.svelte
│ │ │ ├── HorizontalListGroup.svelte
│ │ │ ├── InlineLayout.svelte
│ │ │ ├── RadioButton.svelte
│ │ │ ├── RadioInDropdown.svelte
│ │ │ ├── RadioListGroup.svelte
│ │ │ ├── RadioWithALink.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── range/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ ├── search-input/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Dropdown.svelte
│ │ │ ├── Location.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── SimpleSearch.svelte
│ │ │ ├── SizeLarge.svelte
│ │ │ ├── ValueBinding.svelte
│ │ │ ├── Voice.svelte
│ │ │ └── index.ts
│ │ ├── select/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── CustomOptions.svelte
│ │ │ ├── DropdownSelect.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── textarea/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ChatroomInput.svelte
│ │ │ ├── CommentBox.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── WysiwygEditor.svelte
│ │ │ └── index.ts
│ │ └── toggle/
│ │ ├── +page.svelte
│ │ └── examples/
│ │ ├── CustomSize.svelte
│ │ ├── Loading.svelte
│ │ ├── Setup.svelte
│ │ └── index.ts
│ ├── md/
│ │ ├── app-css.md
│ │ ├── flowbite-svelte-icons.md
│ │ ├── install-svelte.md
│ │ ├── runes.md
│ │ ├── svelte-5-ui-lib.md
│ │ ├── svg-icons.md
│ │ ├── tailwind-config.md
│ │ └── tailwind.md
│ ├── pages/
│ │ ├── about/
│ │ │ └── +page.svelte
│ │ ├── coverage/
│ │ │ └── +page.svelte
│ │ └── theme/
│ │ ├── +page.svelte
│ │ └── theme.config.ts
│ ├── plugins/
│ │ └── chart/
│ │ ├── +page.svelte
│ │ └── md/
│ │ ├── area-chart.md
│ │ ├── bar-chart.md
│ │ ├── column-chart.md
│ │ └── setup.md
│ ├── sitemap.xml/
│ │ └── +server.ts
│ ├── testdir/
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ ├── GrandChild.svelte
│ │ └── Table.svelte
│ ├── typography/
│ │ ├── blockquote/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Context.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── Icon.svelte
│ │ │ ├── Review.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Solid.svelte
│ │ │ ├── Testimonial.svelte
│ │ │ └── index.ts
│ │ ├── heading/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Badge.svelte
│ │ │ ├── Breadcrumb.svelte
│ │ │ ├── Default.svelte
│ │ │ ├── Gradient.svelte
│ │ │ ├── Highlighted.svelte
│ │ │ ├── Mark.svelte
│ │ │ ├── SecondLevel.svelte
│ │ │ ├── Secondary.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── Underline.svelte
│ │ │ └── index.ts
│ │ ├── hr/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── image/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── Enhanced.svelte
│ │ │ ├── ImportEx.svelte
│ │ │ ├── RetinaReady.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── layout/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── OneColumn.svelte
│ │ │ ├── Setup.svelte
│ │ │ ├── ThreeColumnsEven.svelte
│ │ │ ├── TwoColumnsEven.svelte
│ │ │ ├── TwoColumnsUneven.svelte
│ │ │ └── index.ts
│ │ ├── link/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── ButtonLink.svelte
│ │ │ ├── CardLink.svelte
│ │ │ ├── CardWithImage.svelte
│ │ │ ├── CtaLink.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── list/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ ├── AdvancedLayout.svelte
│ │ │ ├── DescriptionList.svelte
│ │ │ ├── HorizontalList.svelte
│ │ │ ├── Setup.svelte
│ │ │ └── index.ts
│ │ ├── paragraph/
│ │ │ ├── +page.svelte
│ │ │ └── examples/
│ │ │ └── Setup.svelte
│ │ └── span/
│ │ ├── +page.svelte
│ │ └── examples/
│ │ └── Setup.svelte
│ └── utils/
│ ├── CodeWrapper.svelte
│ ├── CompoAttributesViewer.svelte
│ ├── DynamicCodeBlockHighlight.svelte
│ ├── DynamicCodeBlockStyle.svelte
│ ├── Footer.svelte
│ ├── GitHub.svelte
│ ├── H1.svelte
│ ├── H2.svelte
│ ├── H3.svelte
│ ├── HighlightCompo.svelte
│ ├── PlusPlaceholder.svelte
│ ├── TableDefaultRow.svelte
│ ├── TableProp.svelte
│ ├── anchor/
│ │ ├── Anchor.svelte
│ │ ├── index.ts
│ │ └── theme.ts
│ ├── heading/
│ │ ├── H1.svelte
│ │ ├── H2.svelte
│ │ ├── H3.svelte
│ │ ├── index.ts
│ │ └── theme.ts
│ ├── helpers.ts
│ ├── highlight/
│ │ ├── languages/
│ │ │ ├── 1c.d.ts
│ │ │ ├── 1c.js
│ │ │ ├── abnf.d.ts
│ │ │ ├── abnf.js
│ │ │ ├── accesslog.d.ts
│ │ │ ├── accesslog.js
│ │ │ ├── actionscript.d.ts
│ │ │ ├── actionscript.js
│ │ │ ├── ada.d.ts
│ │ │ ├── ada.js
│ │ │ ├── angelscript.d.ts
│ │ │ ├── angelscript.js
│ │ │ ├── apache.d.ts
│ │ │ ├── apache.js
│ │ │ ├── applescript.d.ts
│ │ │ ├── applescript.js
│ │ │ ├── arcade.d.ts
│ │ │ ├── arcade.js
│ │ │ ├── arduino.d.ts
│ │ │ ├── arduino.js
│ │ │ ├── armasm.d.ts
│ │ │ ├── armasm.js
│ │ │ ├── asciidoc.d.ts
│ │ │ ├── asciidoc.js
│ │ │ ├── aspectj.d.ts
│ │ │ ├── aspectj.js
│ │ │ ├── autohotkey.d.ts
│ │ │ ├── autohotkey.js
│ │ │ ├── autoit.d.ts
│ │ │ ├── autoit.js
│ │ │ ├── avrasm.d.ts
│ │ │ ├── avrasm.js
│ │ │ ├── awk.d.ts
│ │ │ ├── awk.js
│ │ │ ├── axapta.d.ts
│ │ │ ├── axapta.js
│ │ │ ├── bash.d.ts
│ │ │ ├── bash.js
│ │ │ ├── basic.d.ts
│ │ │ ├── basic.js
│ │ │ ├── bnf.d.ts
│ │ │ ├── bnf.js
│ │ │ ├── brainfuck.d.ts
│ │ │ ├── brainfuck.js
│ │ │ ├── c.d.ts
│ │ │ ├── c.js
│ │ │ ├── cal.d.ts
│ │ │ ├── cal.js
│ │ │ ├── capnproto.d.ts
│ │ │ ├── capnproto.js
│ │ │ ├── ceylon.d.ts
│ │ │ ├── ceylon.js
│ │ │ ├── clean.d.ts
│ │ │ ├── clean.js
│ │ │ ├── clojure-repl.d.ts
│ │ │ ├── clojure-repl.js
│ │ │ ├── clojure.d.ts
│ │ │ ├── clojure.js
│ │ │ ├── cmake.d.ts
│ │ │ ├── cmake.js
│ │ │ ├── coffeescript.d.ts
│ │ │ ├── coffeescript.js
│ │ │ ├── coq.d.ts
│ │ │ ├── coq.js
│ │ │ ├── cos.d.ts
│ │ │ ├── cos.js
│ │ │ ├── cpp.d.ts
│ │ │ ├── cpp.js
│ │ │ ├── crmsh.d.ts
│ │ │ ├── crmsh.js
│ │ │ ├── crystal.d.ts
│ │ │ ├── crystal.js
│ │ │ ├── csharp.d.ts
│ │ │ ├── csharp.js
│ │ │ ├── csp.d.ts
│ │ │ ├── csp.js
│ │ │ ├── css.d.ts
│ │ │ ├── css.js
│ │ │ ├── d.d.ts
│ │ │ ├── d.js
│ │ │ ├── dart.d.ts
│ │ │ ├── dart.js
│ │ │ ├── delphi.d.ts
│ │ │ ├── delphi.js
│ │ │ ├── diff.d.ts
│ │ │ ├── diff.js
│ │ │ ├── django.d.ts
│ │ │ ├── django.js
│ │ │ ├── dns.d.ts
│ │ │ ├── dns.js
│ │ │ ├── dockerfile.d.ts
│ │ │ ├── dockerfile.js
│ │ │ ├── dos.d.ts
│ │ │ ├── dos.js
│ │ │ ├── dsconfig.d.ts
│ │ │ ├── dsconfig.js
│ │ │ ├── dts.d.ts
│ │ │ ├── dts.js
│ │ │ ├── dust.d.ts
│ │ │ ├── dust.js
│ │ │ ├── ebnf.d.ts
│ │ │ ├── ebnf.js
│ │ │ ├── elixir.d.ts
│ │ │ ├── elixir.js
│ │ │ ├── elm.d.ts
│ │ │ ├── elm.js
│ │ │ ├── erb.d.ts
│ │ │ ├── erb.js
│ │ │ ├── erlang-repl.d.ts
│ │ │ ├── erlang-repl.js
│ │ │ ├── erlang.d.ts
│ │ │ ├── erlang.js
│ │ │ ├── excel.d.ts
│ │ │ ├── excel.js
│ │ │ ├── fix.d.ts
│ │ │ ├── fix.js
│ │ │ ├── flix.d.ts
│ │ │ ├── flix.js
│ │ │ ├── fortran.d.ts
│ │ │ ├── fortran.js
│ │ │ ├── fsharp.d.ts
│ │ │ ├── fsharp.js
│ │ │ ├── gams.d.ts
│ │ │ ├── gams.js
│ │ │ ├── gauss.d.ts
│ │ │ ├── gauss.js
│ │ │ ├── gcode.d.ts
│ │ │ ├── gcode.js
│ │ │ ├── gherkin.d.ts
│ │ │ ├── gherkin.js
│ │ │ ├── glsl.d.ts
│ │ │ ├── glsl.js
│ │ │ ├── gml.d.ts
│ │ │ ├── gml.js
│ │ │ ├── go.d.ts
│ │ │ ├── go.js
│ │ │ ├── golo.d.ts
│ │ │ ├── golo.js
│ │ │ ├── gradle.d.ts
│ │ │ ├── gradle.js
│ │ │ ├── graphql.d.ts
│ │ │ ├── graphql.js
│ │ │ ├── groovy.d.ts
│ │ │ ├── groovy.js
│ │ │ ├── haml.d.ts
│ │ │ ├── haml.js
│ │ │ ├── handlebars.d.ts
│ │ │ ├── handlebars.js
│ │ │ ├── haskell.d.ts
│ │ │ ├── haskell.js
│ │ │ ├── haxe.d.ts
│ │ │ ├── haxe.js
│ │ │ ├── hsp.d.ts
│ │ │ ├── hsp.js
│ │ │ ├── http.d.ts
│ │ │ ├── http.js
│ │ │ ├── hy.d.ts
│ │ │ ├── hy.js
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── inform7.d.ts
│ │ │ ├── inform7.js
│ │ │ ├── ini.d.ts
│ │ │ ├── ini.js
│ │ │ ├── irpf90.d.ts
│ │ │ ├── irpf90.js
│ │ │ ├── isbl.d.ts
│ │ │ ├── isbl.js
│ │ │ ├── java.d.ts
│ │ │ ├── java.js
│ │ │ ├── javascript.d.ts
│ │ │ ├── javascript.js
│ │ │ ├── jboss-cli.d.ts
│ │ │ ├── jboss-cli.js
│ │ │ ├── json.d.ts
│ │ │ ├── json.js
│ │ │ ├── julia-repl.d.ts
│ │ │ ├── julia-repl.js
│ │ │ ├── julia.d.ts
│ │ │ ├── julia.js
│ │ │ ├── kotlin.d.ts
│ │ │ ├── kotlin.js
│ │ │ ├── lasso.d.ts
│ │ │ ├── lasso.js
│ │ │ ├── latex.d.ts
│ │ │ ├── latex.js
│ │ │ ├── ldif.d.ts
│ │ │ ├── ldif.js
│ │ │ ├── leaf.d.ts
│ │ │ ├── leaf.js
│ │ │ ├── less.d.ts
│ │ │ ├── less.js
│ │ │ ├── lisp.d.ts
│ │ │ ├── lisp.js
│ │ │ ├── livecodeserver.d.ts
│ │ │ ├── livecodeserver.js
│ │ │ ├── livescript.d.ts
│ │ │ ├── livescript.js
│ │ │ ├── llvm.d.ts
│ │ │ ├── llvm.js
│ │ │ ├── lsl.d.ts
│ │ │ ├── lsl.js
│ │ │ ├── lua.d.ts
│ │ │ ├── lua.js
│ │ │ ├── makefile.d.ts
│ │ │ ├── makefile.js
│ │ │ ├── markdown.d.ts
│ │ │ ├── markdown.js
│ │ │ ├── mathematica.d.ts
│ │ │ ├── mathematica.js
│ │ │ ├── matlab.d.ts
│ │ │ ├── matlab.js
│ │ │ ├── maxima.d.ts
│ │ │ ├── maxima.js
│ │ │ ├── mel.d.ts
│ │ │ ├── mel.js
│ │ │ ├── mercury.d.ts
│ │ │ ├── mercury.js
│ │ │ ├── mipsasm.d.ts
│ │ │ ├── mipsasm.js
│ │ │ ├── mizar.d.ts
│ │ │ ├── mizar.js
│ │ │ ├── mojolicious.d.ts
│ │ │ ├── mojolicious.js
│ │ │ ├── monkey.d.ts
│ │ │ ├── monkey.js
│ │ │ ├── moonscript.d.ts
│ │ │ ├── moonscript.js
│ │ │ ├── n1ql.d.ts
│ │ │ ├── n1ql.js
│ │ │ ├── nestedtext.d.ts
│ │ │ ├── nestedtext.js
│ │ │ ├── nginx.d.ts
│ │ │ ├── nginx.js
│ │ │ ├── nim.d.ts
│ │ │ ├── nim.js
│ │ │ ├── nix.d.ts
│ │ │ ├── nix.js
│ │ │ ├── node-repl.d.ts
│ │ │ ├── node-repl.js
│ │ │ ├── nsis.d.ts
│ │ │ ├── nsis.js
│ │ │ ├── objectivec.d.ts
│ │ │ ├── objectivec.js
│ │ │ ├── ocaml.d.ts
│ │ │ ├── ocaml.js
│ │ │ ├── openscad.d.ts
│ │ │ ├── openscad.js
│ │ │ ├── oxygene.d.ts
│ │ │ ├── oxygene.js
│ │ │ ├── parser3.d.ts
│ │ │ ├── parser3.js
│ │ │ ├── perl.d.ts
│ │ │ ├── perl.js
│ │ │ ├── pf.d.ts
│ │ │ ├── pf.js
│ │ │ ├── pgsql.d.ts
│ │ │ ├── pgsql.js
│ │ │ ├── php-template.d.ts
│ │ │ ├── php-template.js
│ │ │ ├── php.d.ts
│ │ │ ├── php.js
│ │ │ ├── plaintext.d.ts
│ │ │ ├── plaintext.js
│ │ │ ├── pony.d.ts
│ │ │ ├── pony.js
│ │ │ ├── powershell.d.ts
│ │ │ ├── powershell.js
│ │ │ ├── processing.d.ts
│ │ │ ├── processing.js
│ │ │ ├── profile.d.ts
│ │ │ ├── profile.js
│ │ │ ├── prolog.d.ts
│ │ │ ├── prolog.js
│ │ │ ├── properties.d.ts
│ │ │ ├── properties.js
│ │ │ ├── protobuf.d.ts
│ │ │ ├── protobuf.js
│ │ │ ├── puppet.d.ts
│ │ │ ├── puppet.js
│ │ │ ├── purebasic.d.ts
│ │ │ ├── purebasic.js
│ │ │ ├── python-repl.d.ts
│ │ │ ├── python-repl.js
│ │ │ ├── python.d.ts
│ │ │ ├── python.js
│ │ │ ├── q.d.ts
│ │ │ ├── q.js
│ │ │ ├── qml.d.ts
│ │ │ ├── qml.js
│ │ │ ├── r.d.ts
│ │ │ ├── r.js
│ │ │ ├── reasonml.d.ts
│ │ │ ├── reasonml.js
│ │ │ ├── rib.d.ts
│ │ │ ├── rib.js
│ │ │ ├── roboconf.d.ts
│ │ │ ├── roboconf.js
│ │ │ ├── routeros.d.ts
│ │ │ ├── routeros.js
│ │ │ ├── rsl.d.ts
│ │ │ ├── rsl.js
│ │ │ ├── ruby.d.ts
│ │ │ ├── ruby.js
│ │ │ ├── ruleslanguage.d.ts
│ │ │ ├── ruleslanguage.js
│ │ │ ├── rust.d.ts
│ │ │ ├── rust.js
│ │ │ ├── sas.d.ts
│ │ │ ├── sas.js
│ │ │ ├── scala.d.ts
│ │ │ ├── scala.js
│ │ │ ├── scheme.d.ts
│ │ │ ├── scheme.js
│ │ │ ├── scilab.d.ts
│ │ │ ├── scilab.js
│ │ │ ├── scss.d.ts
│ │ │ ├── scss.js
│ │ │ ├── shell.d.ts
│ │ │ ├── shell.js
│ │ │ ├── smali.d.ts
│ │ │ ├── smali.js
│ │ │ ├── smalltalk.d.ts
│ │ │ ├── smalltalk.js
│ │ │ ├── sml.d.ts
│ │ │ ├── sml.js
│ │ │ ├── sqf.d.ts
│ │ │ ├── sqf.js
│ │ │ ├── sql.d.ts
│ │ │ ├── sql.js
│ │ │ ├── stan.d.ts
│ │ │ ├── stan.js
│ │ │ ├── stata.d.ts
│ │ │ ├── stata.js
│ │ │ ├── step21.d.ts
│ │ │ ├── step21.js
│ │ │ ├── stylus.d.ts
│ │ │ ├── stylus.js
│ │ │ ├── subunit.d.ts
│ │ │ ├── subunit.js
│ │ │ ├── swift.d.ts
│ │ │ ├── swift.js
│ │ │ ├── taggerscript.d.ts
│ │ │ ├── taggerscript.js
│ │ │ ├── tap.d.ts
│ │ │ ├── tap.js
│ │ │ ├── tcl.d.ts
│ │ │ ├── tcl.js
│ │ │ ├── thrift.d.ts
│ │ │ ├── thrift.js
│ │ │ ├── tp.d.ts
│ │ │ ├── tp.js
│ │ │ ├── twig.d.ts
│ │ │ ├── twig.js
│ │ │ ├── typescript.d.ts
│ │ │ ├── typescript.js
│ │ │ ├── vala.d.ts
│ │ │ ├── vala.js
│ │ │ ├── vbnet.d.ts
│ │ │ ├── vbnet.js
│ │ │ ├── vbscript-html.d.ts
│ │ │ ├── vbscript-html.js
│ │ │ ├── vbscript.d.ts
│ │ │ ├── vbscript.js
│ │ │ ├── verilog.d.ts
│ │ │ ├── verilog.js
│ │ │ ├── vhdl.d.ts
│ │ │ ├── vhdl.js
│ │ │ ├── vim.d.ts
│ │ │ ├── vim.js
│ │ │ ├── wasm.d.ts
│ │ │ ├── wasm.js
│ │ │ ├── wren.d.ts
│ │ │ ├── wren.js
│ │ │ ├── x86asm.d.ts
│ │ │ ├── x86asm.js
│ │ │ ├── xl.d.ts
│ │ │ ├── xl.js
│ │ │ ├── xml.d.ts
│ │ │ ├── xml.js
│ │ │ ├── xquery.d.ts
│ │ │ ├── xquery.js
│ │ │ ├── yaml.d.ts
│ │ │ ├── yaml.js
│ │ │ ├── zephir.d.ts
│ │ │ └── zephir.js
│ │ ├── styles/
│ │ │ ├── 3024.css
│ │ │ ├── 3024.d.ts
│ │ │ ├── 3024.js
│ │ │ ├── a11y-dark.css
│ │ │ ├── a11y-dark.d.ts
│ │ │ ├── a11y-dark.js
│ │ │ ├── a11y-light.css
│ │ │ ├── a11y-light.d.ts
│ │ │ ├── a11y-light.js
│ │ │ ├── agate.css
│ │ │ ├── agate.d.ts
│ │ │ ├── agate.js
│ │ │ ├── an-old-hope.css
│ │ │ ├── an-old-hope.d.ts
│ │ │ ├── an-old-hope.js
│ │ │ ├── androidstudio.css
│ │ │ ├── androidstudio.d.ts
│ │ │ ├── androidstudio.js
│ │ │ ├── apathy.css
│ │ │ ├── apathy.d.ts
│ │ │ ├── apathy.js
│ │ │ ├── apprentice.css
│ │ │ ├── apprentice.d.ts
│ │ │ ├── apprentice.js
│ │ │ ├── arduino-light.css
│ │ │ ├── arduino-light.d.ts
│ │ │ ├── arduino-light.js
│ │ │ ├── arta.css
│ │ │ ├── arta.d.ts
│ │ │ ├── arta.js
│ │ │ ├── ascetic.css
│ │ │ ├── ascetic.d.ts
│ │ │ ├── ascetic.js
│ │ │ ├── ashes.css
│ │ │ ├── ashes.d.ts
│ │ │ ├── ashes.js
│ │ │ ├── atelier-cave-light.css
│ │ │ ├── atelier-cave-light.d.ts
│ │ │ ├── atelier-cave-light.js
│ │ │ ├── atelier-cave.css
│ │ │ ├── atelier-cave.d.ts
│ │ │ ├── atelier-cave.js
│ │ │ ├── atelier-dune-light.css
│ │ │ ├── atelier-dune-light.d.ts
│ │ │ ├── atelier-dune-light.js
│ │ │ ├── atelier-dune.css
│ │ │ ├── atelier-dune.d.ts
│ │ │ ├── atelier-dune.js
│ │ │ ├── atelier-estuary-light.css
│ │ │ ├── atelier-estuary-light.d.ts
│ │ │ ├── atelier-estuary-light.js
│ │ │ ├── atelier-estuary.css
│ │ │ ├── atelier-estuary.d.ts
│ │ │ ├── atelier-estuary.js
│ │ │ ├── atelier-forest-light.css
│ │ │ ├── atelier-forest-light.d.ts
│ │ │ ├── atelier-forest-light.js
│ │ │ ├── atelier-forest.css
│ │ │ ├── atelier-forest.d.ts
│ │ │ ├── atelier-forest.js
│ │ │ ├── atelier-heath-light.css
│ │ │ ├── atelier-heath-light.d.ts
│ │ │ ├── atelier-heath-light.js
│ │ │ ├── atelier-heath.css
│ │ │ ├── atelier-heath.d.ts
│ │ │ ├── atelier-heath.js
│ │ │ ├── atelier-lakeside-light.css
│ │ │ ├── atelier-lakeside-light.d.ts
│ │ │ ├── atelier-lakeside-light.js
│ │ │ ├── atelier-lakeside.css
│ │ │ ├── atelier-lakeside.d.ts
│ │ │ ├── atelier-lakeside.js
│ │ │ ├── atelier-plateau-light.css
│ │ │ ├── atelier-plateau-light.d.ts
│ │ │ ├── atelier-plateau-light.js
│ │ │ ├── atelier-plateau.css
│ │ │ ├── atelier-plateau.d.ts
│ │ │ ├── atelier-plateau.js
│ │ │ ├── atelier-savanna-light.css
│ │ │ ├── atelier-savanna-light.d.ts
│ │ │ ├── atelier-savanna-light.js
│ │ │ ├── atelier-savanna.css
│ │ │ ├── atelier-savanna.d.ts
│ │ │ ├── atelier-savanna.js
│ │ │ ├── atelier-seaside-light.css
│ │ │ ├── atelier-seaside-light.d.ts
│ │ │ ├── atelier-seaside-light.js
│ │ │ ├── atelier-seaside.css
│ │ │ ├── atelier-seaside.d.ts
│ │ │ ├── atelier-seaside.js
│ │ │ ├── atelier-sulphurpool-light.css
│ │ │ ├── atelier-sulphurpool-light.d.ts
│ │ │ ├── atelier-sulphurpool-light.js
│ │ │ ├── atelier-sulphurpool.css
│ │ │ ├── atelier-sulphurpool.d.ts
│ │ │ ├── atelier-sulphurpool.js
│ │ │ ├── atlas.css
│ │ │ ├── atlas.d.ts
│ │ │ ├── atlas.js
│ │ │ ├── atom-one-dark-reasonable.css
│ │ │ ├── atom-one-dark-reasonable.d.ts
│ │ │ ├── atom-one-dark-reasonable.js
│ │ │ ├── atom-one-dark.css
│ │ │ ├── atom-one-dark.d.ts
│ │ │ ├── atom-one-dark.js
│ │ │ ├── atom-one-light.css
│ │ │ ├── atom-one-light.d.ts
│ │ │ ├── atom-one-light.js
│ │ │ ├── base16-github.css
│ │ │ ├── base16-github.d.ts
│ │ │ ├── base16-github.js
│ │ │ ├── base16-ir-black.css
│ │ │ ├── base16-ir-black.d.ts
│ │ │ ├── base16-ir-black.js
│ │ │ ├── base16-monokai.css
│ │ │ ├── base16-monokai.d.ts
│ │ │ ├── base16-monokai.js
│ │ │ ├── base16-nord.css
│ │ │ ├── base16-nord.d.ts
│ │ │ ├── base16-nord.js
│ │ │ ├── bespin.css
│ │ │ ├── bespin.d.ts
│ │ │ ├── bespin.js
│ │ │ ├── black-metal-bathory.css
│ │ │ ├── black-metal-bathory.d.ts
│ │ │ ├── black-metal-bathory.js
│ │ │ ├── black-metal-burzum.css
│ │ │ ├── black-metal-burzum.d.ts
│ │ │ ├── black-metal-burzum.js
│ │ │ ├── black-metal-dark-funeral.css
│ │ │ ├── black-metal-dark-funeral.d.ts
│ │ │ ├── black-metal-dark-funeral.js
│ │ │ ├── black-metal-gorgoroth.css
│ │ │ ├── black-metal-gorgoroth.d.ts
│ │ │ ├── black-metal-gorgoroth.js
│ │ │ ├── black-metal-immortal.css
│ │ │ ├── black-metal-immortal.d.ts
│ │ │ ├── black-metal-immortal.js
│ │ │ ├── black-metal-khold.css
│ │ │ ├── black-metal-khold.d.ts
│ │ │ ├── black-metal-khold.js
│ │ │ ├── black-metal-marduk.css
│ │ │ ├── black-metal-marduk.d.ts
│ │ │ ├── black-metal-marduk.js
│ │ │ ├── black-metal-mayhem.css
│ │ │ ├── black-metal-mayhem.d.ts
│ │ │ ├── black-metal-mayhem.js
│ │ │ ├── black-metal-nile.css
│ │ │ ├── black-metal-nile.d.ts
│ │ │ ├── black-metal-nile.js
│ │ │ ├── black-metal-venom.css
│ │ │ ├── black-metal-venom.d.ts
│ │ │ ├── black-metal-venom.js
│ │ │ ├── black-metal.css
│ │ │ ├── black-metal.d.ts
│ │ │ ├── black-metal.js
│ │ │ ├── brewer.css
│ │ │ ├── brewer.d.ts
│ │ │ ├── brewer.js
│ │ │ ├── bright.css
│ │ │ ├── bright.d.ts
│ │ │ ├── bright.js
│ │ │ ├── brogrammer.css
│ │ │ ├── brogrammer.d.ts
│ │ │ ├── brogrammer.js
│ │ │ ├── brown-paper.css
│ │ │ ├── brown-paper.d.ts
│ │ │ ├── brown-paper.js
│ │ │ ├── brush-trees-dark.css
│ │ │ ├── brush-trees-dark.d.ts
│ │ │ ├── brush-trees-dark.js
│ │ │ ├── brush-trees.css
│ │ │ ├── brush-trees.d.ts
│ │ │ ├── brush-trees.js
│ │ │ ├── chalk.css
│ │ │ ├── chalk.d.ts
│ │ │ ├── chalk.js
│ │ │ ├── circus.css
│ │ │ ├── circus.d.ts
│ │ │ ├── circus.js
│ │ │ ├── classic-dark.css
│ │ │ ├── classic-dark.d.ts
│ │ │ ├── classic-dark.js
│ │ │ ├── classic-light.css
│ │ │ ├── classic-light.d.ts
│ │ │ ├── classic-light.js
│ │ │ ├── codepen-embed.css
│ │ │ ├── codepen-embed.d.ts
│ │ │ ├── codepen-embed.js
│ │ │ ├── codeschool.css
│ │ │ ├── codeschool.d.ts
│ │ │ ├── codeschool.js
│ │ │ ├── color-brewer.css
│ │ │ ├── color-brewer.d.ts
│ │ │ ├── color-brewer.js
│ │ │ ├── colors.css
│ │ │ ├── colors.d.ts
│ │ │ ├── colors.js
│ │ │ ├── cupcake.css
│ │ │ ├── cupcake.d.ts
│ │ │ ├── cupcake.js
│ │ │ ├── cupertino.css
│ │ │ ├── cupertino.d.ts
│ │ │ ├── cupertino.js
│ │ │ ├── danqing.css
│ │ │ ├── danqing.d.ts
│ │ │ ├── danqing.js
│ │ │ ├── darcula.css
│ │ │ ├── darcula.d.ts
│ │ │ ├── darcula.js
│ │ │ ├── dark-violet.css
│ │ │ ├── dark-violet.d.ts
│ │ │ ├── dark-violet.js
│ │ │ ├── dark.css
│ │ │ ├── dark.d.ts
│ │ │ ├── dark.js
│ │ │ ├── darkmoss.css
│ │ │ ├── darkmoss.d.ts
│ │ │ ├── darkmoss.js
│ │ │ ├── darktooth.css
│ │ │ ├── darktooth.d.ts
│ │ │ ├── darktooth.js
│ │ │ ├── decaf.css
│ │ │ ├── decaf.d.ts
│ │ │ ├── decaf.js
│ │ │ ├── default-dark.css
│ │ │ ├── default-dark.d.ts
│ │ │ ├── default-dark.js
│ │ │ ├── default-light.css
│ │ │ ├── default-light.d.ts
│ │ │ ├── default-light.js
│ │ │ ├── default.css
│ │ │ ├── default.d.ts
│ │ │ ├── default.js
│ │ │ ├── devibeans.css
│ │ │ ├── devibeans.d.ts
│ │ │ ├── devibeans.js
│ │ │ ├── dirtysea.css
│ │ │ ├── dirtysea.d.ts
│ │ │ ├── dirtysea.js
│ │ │ ├── docco.css
│ │ │ ├── docco.d.ts
│ │ │ ├── docco.js
│ │ │ ├── dracula.css
│ │ │ ├── dracula.d.ts
│ │ │ ├── dracula.js
│ │ │ ├── edge-dark.css
│ │ │ ├── edge-dark.d.ts
│ │ │ ├── edge-dark.js
│ │ │ ├── edge-light.css
│ │ │ ├── edge-light.d.ts
│ │ │ ├── edge-light.js
│ │ │ ├── eighties.css
│ │ │ ├── eighties.d.ts
│ │ │ ├── eighties.js
│ │ │ ├── embers.css
│ │ │ ├── embers.d.ts
│ │ │ ├── embers.js
│ │ │ ├── equilibrium-dark.css
│ │ │ ├── equilibrium-dark.d.ts
│ │ │ ├── equilibrium-dark.js
│ │ │ ├── equilibrium-gray-dark.css
│ │ │ ├── equilibrium-gray-dark.d.ts
│ │ │ ├── equilibrium-gray-dark.js
│ │ │ ├── equilibrium-gray-light.css
│ │ │ ├── equilibrium-gray-light.d.ts
│ │ │ ├── equilibrium-gray-light.js
│ │ │ ├── equilibrium-light.css
│ │ │ ├── equilibrium-light.d.ts
│ │ │ ├── equilibrium-light.js
│ │ │ ├── espresso.css
│ │ │ ├── espresso.d.ts
│ │ │ ├── espresso.js
│ │ │ ├── eva-dim.css
│ │ │ ├── eva-dim.d.ts
│ │ │ ├── eva-dim.js
│ │ │ ├── eva.css
│ │ │ ├── eva.d.ts
│ │ │ ├── eva.js
│ │ │ ├── far.css
│ │ │ ├── far.d.ts
│ │ │ ├── far.js
│ │ │ ├── felipec.css
│ │ │ ├── felipec.d.ts
│ │ │ ├── felipec.js
│ │ │ ├── flat.css
│ │ │ ├── flat.d.ts
│ │ │ ├── flat.js
│ │ │ ├── foundation.css
│ │ │ ├── foundation.d.ts
│ │ │ ├── foundation.js
│ │ │ ├── framer.css
│ │ │ ├── framer.d.ts
│ │ │ ├── framer.js
│ │ │ ├── fruit-soda.css
│ │ │ ├── fruit-soda.d.ts
│ │ │ ├── fruit-soda.js
│ │ │ ├── gigavolt.css
│ │ │ ├── gigavolt.d.ts
│ │ │ ├── gigavolt.js
│ │ │ ├── github-dark-dimmed.css
│ │ │ ├── github-dark-dimmed.d.ts
│ │ │ ├── github-dark-dimmed.js
│ │ │ ├── github-dark.css
│ │ │ ├── github-dark.d.ts
│ │ │ ├── github-dark.js
│ │ │ ├── github.css
│ │ │ ├── github.d.ts
│ │ │ ├── github.js
│ │ │ ├── gml.css
│ │ │ ├── gml.d.ts
│ │ │ ├── gml.js
│ │ │ ├── google-dark.css
│ │ │ ├── google-dark.d.ts
│ │ │ ├── google-dark.js
│ │ │ ├── google-light.css
│ │ │ ├── google-light.d.ts
│ │ │ ├── google-light.js
│ │ │ ├── googlecode.css
│ │ │ ├── googlecode.d.ts
│ │ │ ├── googlecode.js
│ │ │ ├── gradient-dark.css
│ │ │ ├── gradient-dark.d.ts
│ │ │ ├── gradient-dark.js
│ │ │ ├── gradient-light.css
│ │ │ ├── gradient-light.d.ts
│ │ │ ├── gradient-light.js
│ │ │ ├── grayscale-dark.css
│ │ │ ├── grayscale-dark.d.ts
│ │ │ ├── grayscale-dark.js
│ │ │ ├── grayscale-light.css
│ │ │ ├── grayscale-light.d.ts
│ │ │ ├── grayscale-light.js
│ │ │ ├── grayscale.css
│ │ │ ├── grayscale.d.ts
│ │ │ ├── grayscale.js
│ │ │ ├── green-screen.css
│ │ │ ├── green-screen.d.ts
│ │ │ ├── green-screen.js
│ │ │ ├── gruvbox-dark-hard.css
│ │ │ ├── gruvbox-dark-hard.d.ts
│ │ │ ├── gruvbox-dark-hard.js
│ │ │ ├── gruvbox-dark-medium.css
│ │ │ ├── gruvbox-dark-medium.d.ts
│ │ │ ├── gruvbox-dark-medium.js
│ │ │ ├── gruvbox-dark-pale.css
│ │ │ ├── gruvbox-dark-pale.d.ts
│ │ │ ├── gruvbox-dark-pale.js
│ │ │ ├── gruvbox-dark-soft.css
│ │ │ ├── gruvbox-dark-soft.d.ts
│ │ │ ├── gruvbox-dark-soft.js
│ │ │ ├── gruvbox-light-hard.css
│ │ │ ├── gruvbox-light-hard.d.ts
│ │ │ ├── gruvbox-light-hard.js
│ │ │ ├── gruvbox-light-medium.css
│ │ │ ├── gruvbox-light-medium.d.ts
│ │ │ ├── gruvbox-light-medium.js
│ │ │ ├── gruvbox-light-soft.css
│ │ │ ├── gruvbox-light-soft.d.ts
│ │ │ ├── gruvbox-light-soft.js
│ │ │ ├── hardcore.css
│ │ │ ├── hardcore.d.ts
│ │ │ ├── hardcore.js
│ │ │ ├── harmonic16-dark.css
│ │ │ ├── harmonic16-dark.d.ts
│ │ │ ├── harmonic16-dark.js
│ │ │ ├── harmonic16-light.css
│ │ │ ├── harmonic16-light.d.ts
│ │ │ ├── harmonic16-light.js
│ │ │ ├── heetch-dark.css
│ │ │ ├── heetch-dark.d.ts
│ │ │ ├── heetch-dark.js
│ │ │ ├── heetch-light.css
│ │ │ ├── heetch-light.d.ts
│ │ │ ├── heetch-light.js
│ │ │ ├── helios.css
│ │ │ ├── helios.d.ts
│ │ │ ├── helios.js
│ │ │ ├── hopscotch.css
│ │ │ ├── hopscotch.d.ts
│ │ │ ├── hopscotch.js
│ │ │ ├── horizon-dark.css
│ │ │ ├── horizon-dark.d.ts
│ │ │ ├── horizon-dark.js
│ │ │ ├── horizon-light.css
│ │ │ ├── horizon-light.d.ts
│ │ │ ├── horizon-light.js
│ │ │ ├── humanoid-dark.css
│ │ │ ├── humanoid-dark.d.ts
│ │ │ ├── humanoid-dark.js
│ │ │ ├── humanoid-light.css
│ │ │ ├── humanoid-light.d.ts
│ │ │ ├── humanoid-light.js
│ │ │ ├── hybrid.css
│ │ │ ├── hybrid.d.ts
│ │ │ ├── hybrid.js
│ │ │ ├── ia-dark.css
│ │ │ ├── ia-dark.d.ts
│ │ │ ├── ia-dark.js
│ │ │ ├── ia-light.css
│ │ │ ├── ia-light.d.ts
│ │ │ ├── ia-light.js
│ │ │ ├── icy-dark.css
│ │ │ ├── icy-dark.d.ts
│ │ │ ├── icy-dark.js
│ │ │ ├── idea.css
│ │ │ ├── idea.d.ts
│ │ │ ├── idea.js
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ ├── intellij-light.css
│ │ │ ├── intellij-light.d.ts
│ │ │ ├── intellij-light.js
│ │ │ ├── ir-black.css
│ │ │ ├── ir-black.d.ts
│ │ │ ├── ir-black.js
│ │ │ ├── isbl-editor-dark.css
│ │ │ ├── isbl-editor-dark.d.ts
│ │ │ ├── isbl-editor-dark.js
│ │ │ ├── isbl-editor-light.css
│ │ │ ├── isbl-editor-light.d.ts
│ │ │ ├── isbl-editor-light.js
│ │ │ ├── isotope.css
│ │ │ ├── isotope.d.ts
│ │ │ ├── isotope.js
│ │ │ ├── kimber.css
│ │ │ ├── kimber.d.ts
│ │ │ ├── kimber.js
│ │ │ ├── kimbie-dark.css
│ │ │ ├── kimbie-dark.d.ts
│ │ │ ├── kimbie-dark.js
│ │ │ ├── kimbie-light.css
│ │ │ ├── kimbie-light.d.ts
│ │ │ ├── kimbie-light.js
│ │ │ ├── lightfair.css
│ │ │ ├── lightfair.d.ts
│ │ │ ├── lightfair.js
│ │ │ ├── lioshi.css
│ │ │ ├── lioshi.d.ts
│ │ │ ├── lioshi.js
│ │ │ ├── london-tube.css
│ │ │ ├── london-tube.d.ts
│ │ │ ├── london-tube.js
│ │ │ ├── macintosh.css
│ │ │ ├── macintosh.d.ts
│ │ │ ├── macintosh.js
│ │ │ ├── magula.css
│ │ │ ├── magula.d.ts
│ │ │ ├── magula.js
│ │ │ ├── marrakesh.css
│ │ │ ├── marrakesh.d.ts
│ │ │ ├── marrakesh.js
│ │ │ ├── materia.css
│ │ │ ├── materia.d.ts
│ │ │ ├── materia.js
│ │ │ ├── material-darker.css
│ │ │ ├── material-darker.d.ts
│ │ │ ├── material-darker.js
│ │ │ ├── material-lighter.css
│ │ │ ├── material-lighter.d.ts
│ │ │ ├── material-lighter.js
│ │ │ ├── material-palenight.css
│ │ │ ├── material-palenight.d.ts
│ │ │ ├── material-palenight.js
│ │ │ ├── material-vivid.css
│ │ │ ├── material-vivid.d.ts
│ │ │ ├── material-vivid.js
│ │ │ ├── material.css
│ │ │ ├── material.d.ts
│ │ │ ├── material.js
│ │ │ ├── mellow-purple.css
│ │ │ ├── mellow-purple.d.ts
│ │ │ ├── mellow-purple.js
│ │ │ ├── mexico-light.css
│ │ │ ├── mexico-light.d.ts
│ │ │ ├── mexico-light.js
│ │ │ ├── mocha.css
│ │ │ ├── mocha.d.ts
│ │ │ ├── mocha.js
│ │ │ ├── mono-blue.css
│ │ │ ├── mono-blue.d.ts
│ │ │ ├── mono-blue.js
│ │ │ ├── monokai-sublime.css
│ │ │ ├── monokai-sublime.d.ts
│ │ │ ├── monokai-sublime.js
│ │ │ ├── monokai.css
│ │ │ ├── monokai.d.ts
│ │ │ ├── monokai.js
│ │ │ ├── nebula.css
│ │ │ ├── nebula.d.ts
│ │ │ ├── nebula.js
│ │ │ ├── night-owl.css
│ │ │ ├── night-owl.d.ts
│ │ │ ├── night-owl.js
│ │ │ ├── nnfx-dark.css
│ │ │ ├── nnfx-dark.d.ts
│ │ │ ├── nnfx-dark.js
│ │ │ ├── nnfx-light.css
│ │ │ ├── nnfx-light.d.ts
│ │ │ ├── nnfx-light.js
│ │ │ ├── nord.css
│ │ │ ├── nord.d.ts
│ │ │ ├── nord.js
│ │ │ ├── nova.css
│ │ │ ├── nova.d.ts
│ │ │ ├── nova.js
│ │ │ ├── obsidian.css
│ │ │ ├── obsidian.d.ts
│ │ │ ├── obsidian.js
│ │ │ ├── ocean.css
│ │ │ ├── ocean.d.ts
│ │ │ ├── ocean.js
│ │ │ ├── oceanicnext.css
│ │ │ ├── oceanicnext.d.ts
│ │ │ ├── oceanicnext.js
│ │ │ ├── one-light.css
│ │ │ ├── one-light.d.ts
│ │ │ ├── one-light.js
│ │ │ ├── onedark.css
│ │ │ ├── onedark.d.ts
│ │ │ ├── onedark.js
│ │ │ ├── outrun-dark.css
│ │ │ ├── outrun-dark.d.ts
│ │ │ ├── outrun-dark.js
│ │ │ ├── panda-syntax-dark.css
│ │ │ ├── panda-syntax-dark.d.ts
│ │ │ ├── panda-syntax-dark.js
│ │ │ ├── panda-syntax-light.css
│ │ │ ├── panda-syntax-light.d.ts
│ │ │ ├── panda-syntax-light.js
│ │ │ ├── papercolor-dark.css
│ │ │ ├── papercolor-dark.d.ts
│ │ │ ├── papercolor-dark.js
│ │ │ ├── papercolor-light.css
│ │ │ ├── papercolor-light.d.ts
│ │ │ ├── papercolor-light.js
│ │ │ ├── paraiso-dark.css
│ │ │ ├── paraiso-dark.d.ts
│ │ │ ├── paraiso-dark.js
│ │ │ ├── paraiso-light.css
│ │ │ ├── paraiso-light.d.ts
│ │ │ ├── paraiso-light.js
│ │ │ ├── paraiso.css
│ │ │ ├── paraiso.d.ts
│ │ │ ├── paraiso.js
│ │ │ ├── pasque.css
│ │ │ ├── pasque.d.ts
│ │ │ ├── pasque.js
│ │ │ ├── phd.css
│ │ │ ├── phd.d.ts
│ │ │ ├── phd.js
│ │ │ ├── pico.css
│ │ │ ├── pico.d.ts
│ │ │ ├── pico.js
│ │ │ ├── pojoaque.css
│ │ │ ├── pojoaque.d.ts
│ │ │ ├── pojoaque.js
│ │ │ ├── pop.css
│ │ │ ├── pop.d.ts
│ │ │ ├── pop.js
│ │ │ ├── porple.css
│ │ │ ├── porple.d.ts
│ │ │ ├── porple.js
│ │ │ ├── purebasic.css
│ │ │ ├── purebasic.d.ts
│ │ │ ├── purebasic.js
│ │ │ ├── qtcreator-dark.css
│ │ │ ├── qtcreator-dark.d.ts
│ │ │ ├── qtcreator-dark.js
│ │ │ ├── qtcreator-light.css
│ │ │ ├── qtcreator-light.d.ts
│ │ │ ├── qtcreator-light.js
│ │ │ ├── qualia.css
│ │ │ ├── qualia.d.ts
│ │ │ ├── qualia.js
│ │ │ ├── railscasts.css
│ │ │ ├── railscasts.d.ts
│ │ │ ├── railscasts.js
│ │ │ ├── rainbow.css
│ │ │ ├── rainbow.d.ts
│ │ │ ├── rainbow.js
│ │ │ ├── rebecca.css
│ │ │ ├── rebecca.d.ts
│ │ │ ├── rebecca.js
│ │ │ ├── ros-pine-dawn.css
│ │ │ ├── ros-pine-dawn.d.ts
│ │ │ ├── ros-pine-dawn.js
│ │ │ ├── ros-pine-moon.css
│ │ │ ├── ros-pine-moon.d.ts
│ │ │ ├── ros-pine-moon.js
│ │ │ ├── ros-pine.css
│ │ │ ├── ros-pine.d.ts
│ │ │ ├── ros-pine.js
│ │ │ ├── routeros.css
│ │ │ ├── routeros.d.ts
│ │ │ ├── routeros.js
│ │ │ ├── sagelight.css
│ │ │ ├── sagelight.d.ts
│ │ │ ├── sagelight.js
│ │ │ ├── sandcastle.css
│ │ │ ├── sandcastle.d.ts
│ │ │ ├── sandcastle.js
│ │ │ ├── school-book.css
│ │ │ ├── school-book.d.ts
│ │ │ ├── school-book.js
│ │ │ ├── seti-ui.css
│ │ │ ├── seti-ui.d.ts
│ │ │ ├── seti-ui.js
│ │ │ ├── shades-of-purple.css
│ │ │ ├── shades-of-purple.d.ts
│ │ │ ├── shades-of-purple.js
│ │ │ ├── shapeshifter.css
│ │ │ ├── shapeshifter.d.ts
│ │ │ ├── shapeshifter.js
│ │ │ ├── silk-dark.css
│ │ │ ├── silk-dark.d.ts
│ │ │ ├── silk-dark.js
│ │ │ ├── silk-light.css
│ │ │ ├── silk-light.d.ts
│ │ │ ├── silk-light.js
│ │ │ ├── snazzy.css
│ │ │ ├── snazzy.d.ts
│ │ │ ├── snazzy.js
│ │ │ ├── solar-flare-light.css
│ │ │ ├── solar-flare-light.d.ts
│ │ │ ├── solar-flare-light.js
│ │ │ ├── solar-flare.css
│ │ │ ├── solar-flare.d.ts
│ │ │ ├── solar-flare.js
│ │ │ ├── solarized-dark.css
│ │ │ ├── solarized-dark.d.ts
│ │ │ ├── solarized-dark.js
│ │ │ ├── solarized-light.css
│ │ │ ├── solarized-light.d.ts
│ │ │ ├── solarized-light.js
│ │ │ ├── spacemacs.css
│ │ │ ├── spacemacs.d.ts
│ │ │ ├── spacemacs.js
│ │ │ ├── srcery.css
│ │ │ ├── srcery.d.ts
│ │ │ ├── srcery.js
│ │ │ ├── stackoverflow-dark.css
│ │ │ ├── stackoverflow-dark.d.ts
│ │ │ ├── stackoverflow-dark.js
│ │ │ ├── stackoverflow-light.css
│ │ │ ├── stackoverflow-light.d.ts
│ │ │ ├── stackoverflow-light.js
│ │ │ ├── summercamp.css
│ │ │ ├── summercamp.d.ts
│ │ │ ├── summercamp.js
│ │ │ ├── summerfruit-dark.css
│ │ │ ├── summerfruit-dark.d.ts
│ │ │ ├── summerfruit-dark.js
│ │ │ ├── summerfruit-light.css
│ │ │ ├── summerfruit-light.d.ts
│ │ │ ├── summerfruit-light.js
│ │ │ ├── sunburst.css
│ │ │ ├── sunburst.d.ts
│ │ │ ├── sunburst.js
│ │ │ ├── synth-midnight-terminal-dark.css
│ │ │ ├── synth-midnight-terminal-dark.d.ts
│ │ │ ├── synth-midnight-terminal-dark.js
│ │ │ ├── synth-midnight-terminal-light.css
│ │ │ ├── synth-midnight-terminal-light.d.ts
│ │ │ ├── synth-midnight-terminal-light.js
│ │ │ ├── tango.css
│ │ │ ├── tango.d.ts
│ │ │ ├── tango.js
│ │ │ ├── tender.css
│ │ │ ├── tender.d.ts
│ │ │ ├── tender.js
│ │ │ ├── tokyo-night-dark.css
│ │ │ ├── tokyo-night-dark.d.ts
│ │ │ ├── tokyo-night-dark.js
│ │ │ ├── tokyo-night-light.css
│ │ │ ├── tokyo-night-light.d.ts
│ │ │ ├── tokyo-night-light.js
│ │ │ ├── tomorrow-night-blue.css
│ │ │ ├── tomorrow-night-blue.d.ts
│ │ │ ├── tomorrow-night-blue.js
│ │ │ ├── tomorrow-night-bright.css
│ │ │ ├── tomorrow-night-bright.d.ts
│ │ │ ├── tomorrow-night-bright.js
│ │ │ ├── tomorrow-night.css
│ │ │ ├── tomorrow-night.d.ts
│ │ │ ├── tomorrow-night.js
│ │ │ ├── tomorrow.css
│ │ │ ├── tomorrow.d.ts
│ │ │ ├── tomorrow.js
│ │ │ ├── twilight.css
│ │ │ ├── twilight.d.ts
│ │ │ ├── twilight.js
│ │ │ ├── unikitty-dark.css
│ │ │ ├── unikitty-dark.d.ts
│ │ │ ├── unikitty-dark.js
│ │ │ ├── unikitty-light.css
│ │ │ ├── unikitty-light.d.ts
│ │ │ ├── unikitty-light.js
│ │ │ ├── vs.css
│ │ │ ├── vs.d.ts
│ │ │ ├── vs.js
│ │ │ ├── vs2015.css
│ │ │ ├── vs2015.d.ts
│ │ │ ├── vs2015.js
│ │ │ ├── vulcan.css
│ │ │ ├── vulcan.d.ts
│ │ │ ├── vulcan.js
│ │ │ ├── windows-10-light.css
│ │ │ ├── windows-10-light.d.ts
│ │ │ ├── windows-10-light.js
│ │ │ ├── windows-10.css
│ │ │ ├── windows-10.d.ts
│ │ │ ├── windows-10.js
│ │ │ ├── windows-95-light.css
│ │ │ ├── windows-95-light.d.ts
│ │ │ ├── windows-95-light.js
│ │ │ ├── windows-95.css
│ │ │ ├── windows-95.d.ts
│ │ │ ├── windows-95.js
│ │ │ ├── windows-high-contrast-light.css
│ │ │ ├── windows-high-contrast-light.d.ts
│ │ │ ├── windows-high-contrast-light.js
│ │ │ ├── windows-high-contrast.css
│ │ │ ├── windows-high-contrast.d.ts
│ │ │ ├── windows-high-contrast.js
│ │ │ ├── windows-nt-light.css
│ │ │ ├── windows-nt-light.d.ts
│ │ │ ├── windows-nt-light.js
│ │ │ ├── windows-nt.css
│ │ │ ├── windows-nt.d.ts
│ │ │ ├── windows-nt.js
│ │ │ ├── woodland.css
│ │ │ ├── woodland.d.ts
│ │ │ ├── woodland.js
│ │ │ ├── xcode-dusk.css
│ │ │ ├── xcode-dusk.d.ts
│ │ │ ├── xcode-dusk.js
│ │ │ ├── xcode.css
│ │ │ ├── xcode.d.ts
│ │ │ ├── xcode.js
│ │ │ ├── xt256.css
│ │ │ ├── xt256.d.ts
│ │ │ ├── xt256.js
│ │ │ ├── zenburn.css
│ │ │ ├── zenburn.d.ts
│ │ │ └── zenburn.js
│ │ ├── themeNames.json
│ │ └── themes.css
│ ├── icons/
│ │ ├── Angular.svelte
│ │ ├── ArrowLeft.svelte
│ │ ├── ArrowRight.svelte
│ │ ├── Check.svelte
│ │ ├── China.svelte
│ │ ├── Clipboard.svelte
│ │ ├── CoinbaseWallet.svelte
│ │ ├── Combinator.svelte
│ │ ├── Community.svelte
│ │ ├── Dev.svelte
│ │ ├── Discord.svelte
│ │ ├── Dribble.svelte
│ │ ├── Figma.svelte
│ │ ├── FlowbiteLogo.svelte
│ │ ├── Fortmatic.svelte
│ │ ├── Germany.svelte
│ │ ├── GitHub.svelte
│ │ ├── Hunt.svelte
│ │ ├── Italy.svelte
│ │ ├── Mail.svelte
│ │ ├── MetaMask.svelte
│ │ ├── Moon.svelte
│ │ ├── Npm.svelte
│ │ ├── OperaWallet.svelte
│ │ ├── Quote.svelte
│ │ ├── React.svelte
│ │ ├── Reddit.svelte
│ │ ├── Sun.svelte
│ │ ├── Usa.svelte
│ │ ├── Vue.svelte
│ │ ├── WalletConnect.svelte
│ │ ├── YouTube.svelte
│ │ └── YouTubeFull.svelte
│ └── theme.ts
├── svelte.config.js
├── tsconfig.json
├── vercel.json
├── vite.config.ts
└── vitest-setup-client.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with multi-package repos, or single-package repos to help you version and publish your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": [
"@svitejs/changesets-changelog-github-compact",
{ "repo": "shinokada/svelte-5-ui-lib" }
],
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": []
}
================================================
FILE: .gitignore
================================================
test-results
node_modules
# Output
.output
.vercel
.netlify
.wrangler
/.svelte-kit
/build
/dist
# OS
.DS_Store
Thumbs.db
# Env
.env
.env.*
!.env.example
!.env.test
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
================================================
FILE: .npmrc
================================================
engine-strict=true
================================================
FILE: .prettierignore
================================================
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock
================================================
FILE: .prettierrc
================================================
{
"useTabs": false,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## 0.12.6
### Patch Changes
- fix: remove compo docs
## 0.12.5
### Patch Changes
- fix: modal backdrop
## 0.12.4
### Patch Changes
- docs: update about and README
## 0.12.3
### Patch Changes
- fix: update svelte and tailwindcss 4
## 0.12.2
### Patch Changes
- fix: move all types and interfaces from index to ./type.ts
## 0.12.1
### Patch Changes
- fix: change tailwind-variants from devDependencies to dependencies
## 0.12.0
### Minor Changes
- 15812aeb (HEAD -> main, origin/main, origin/HEAD) fix: TableHead add tr tag
- a47f3687 fix: Rating id not a valid XML name
- 19c1219c feat: rating/CustomIcon, fix: Star, Heart, Thumbup
- 59c5ef39 docs: change span to div in indicators/examples/legend
- 721e10ca fix: card page
- 7e56bb32 fix: remove type prsentation from divin Card
- 78496d98 chore: add /.vercel to gitignore
- 49c0c7e6 fix: add ignores .vercel/ to eslint.config.js
- 7f90ca8c fix: change adapter-auto to adapter-vercel
- fix: CustomIcon.svelte, Heart.svelte, Rating.svelte, Star.svelte, Thumbup.svelte
- fix: TimelineItem.svelte
## 0.11.2
### Patch Changes
- chore: sveltekit update
- change test:integration to test:e2e
- removed enginges from package.json
## 0.11.1
### Patch Changes
- fix: BottomNavItem type
- 8c325984 fix: Card
- 2020074f docs: coverage update
- cbd25300 fix: BottomNavItem: types, docs: tooltip to bottom-nav examples
- 1b97cb19 fix: BottomNav: remove attribute href from element button
- b003187e fix: package.json "node": "^20.0.0"
## 0.11.0
### Minor Changes
- feat: activeUrl for dropdown, bottom-navigation, nav, sidebar
## 0.10.11
### Patch Changes
- fix: put back gen:exports to lib-helers script
## 0.10.10
### Patch Changes
- fix: Tabs: add the id to the panel div
- fix: TabItem: add aria-selected to the button to improve accessibility
## 0.10.9
### Patch Changes
- fix: Tabs and TabItem: generate unique IDs dynamically, add id to tab buttons, add aria-controls to link tab buttons to the panel, pass panelId through context to maintain the connection
- fix: #35 remove sveltekit dependencies
- fix: use undefined to role in Card
- fix: remove link role is unnecessary for element a with attribute href in Card component
- fix: #29 style in CardPlaceholder
- fix: #34 change prop style to inputStyle, navbar A11y update
## 0.10.8
### Patch Changes
- fix: peerDependencies update
## 0.10.7
### Patch Changes
- fix: dependencies update
## 0.10.6
### Patch Changes
- fix: remove sveltekit dependencies
## 0.10.5
### Patch Changes
- fix: #34 change style to inputStyle
## 0.10.4
### Patch Changes
- fix: remove unnecessary import
## 0.10.3
### Patch Changes
- fix: Input.svelte without div class with no left or right
## 0.10.2
### Patch Changes
- fix: Table headItems prop to be an array of HeadItemType
## 0.10.1
### Patch Changes
- fix: Img, ImgEnhanced
## 0.10.0
### Minor Changes
- feat: add @floating-ui/dom to Tooltip
## 0.9.25
### Patch Changes
- fix: lint fixes
## 0.9.24
### Patch Changes
- docs: README update for npmjs
## 0.9.23
### Patch Changes
- feat: Tooltip click and external control ([`9d6683d`](https://github.com/shinokada/svelte-5-ui-lib/commit/9d6683dc8ab7d48c25bcc196820c17c9e9f2209d))
## 0.9.22
### Patch Changes
- fix: add padding none to Card, add optional children to Toggle
## 0.9.21
### Patch Changes
- fix: target prop to Avatar and Badge ([`33e218594d6ba5b62fab553950b68f392abf40cf`](https://github.com/shinokada/svelte-5-ui-lib/commit/33e218594d6ba5b62fab553950b68f392abf40cf))
## 0.9.20
### Patch Changes
- fix: move {...$restProps} before class ([`af194870eedfadac9232d50365aaa08841566a01`](https://github.com/shinokada/svelte-5-ui-lib/commit/af194870eedfadac9232d50365aaa08841566a01))
## 0.9.19
### Patch Changes
- fix: update svelte-lib-helpers for component docs ([`b52d04c278fc9fb87d14ca2ae7653c7bcd1c6efd`](https://github.com/shinokada/svelte-5-ui-lib/commit/b52d04c278fc9fb87d14ca2ae7653c7bcd1c6efd))
## 0.9.18
### Patch Changes
- types: update due to lint errors ([`226d17b08bbc019355ea7a6771551065458bb0f5`](https://github.com/shinokada/svelte-5-ui-lib/commit/226d17b08bbc019355ea7a6771551065458bb0f5))
## 0.9.17
### Patch Changes
- types: update after adding eslint.config.js and pnpm check ([`4c84a8baa6d6a7f9421501d1630ec4dedf4c3c88`](https://github.com/shinokada/svelte-5-ui-lib/commit/4c84a8baa6d6a7f9421501d1630ec4dedf4c3c88)) docs: lib-helpers update and create compoent doc and component data
## 0.9.16
### Patch Changes
- feat: isSingle prop to AccordionItem and SidebarDropdownWrapper components ([`9c623ed80be37a0beb042a3cba040174106ba5fd`](https://github.com/shinokada/svelte-5-ui-lib/commit/9c623ed80be37a0beb042a3cba040174106ba5fd))
## 0.9.15
### Patch Changes
- fix: Search component ([`aee5a4f00e8d32481255fb24bc7bd05bd1ad24e8`](https://github.com/shinokada/svelte-5-ui-lib/commit/aee5a4f00e8d32481255fb24bc7bd05bd1ad24e8))
## 0.9.14
### Patch Changes
- feat: modal component and page ([`47c51b8ddbbda5209099f2b88636a05e0218d398`](https://github.com/shinokada/svelte-5-ui-lib/commit/47c51b8ddbbda5209099f2b88636a05e0218d398))
## 0.9.13
### Patch Changes
- fix: add children to SidebarBrand ([`cf691edbeadb1435daaecceb9d1a407e699c2878`](https://github.com/shinokada/svelte-5-ui-lib/commit/cf691edbeadb1435daaecceb9d1a407e699c2878))
## 0.9.12
### Patch Changes
- fix: type updates ([`c8fddcdb99cb02807292a4eb3cfaa5043add51e4`](https://github.com/shinokada/svelte-5-ui-lib/commit/c8fddcdb99cb02807292a4eb3cfaa5043add51e4))
## 0.9.11
### Patch Changes
- feat: SidebarBrand, SidebarButton, SidebarCta components ([`b340a330f29ea787ff3928d95689c45196d5130a`](https://github.com/shinokada/svelte-5-ui-lib/commit/b340a330f29ea787ff3928d95689c45196d5130a))
## 0.9.10
### Patch Changes
- feat: add transition, backdrop, and activateClickOutsie to Sidebar component ([`5781b3e62a25c95094edb1261cfa9b839c84db36`](https://github.com/shinokada/svelte-5-ui-lib/commit/5781b3e62a25c95094edb1261cfa9b839c84db36))
## 0.9.9
### Patch Changes
- feat: Popover compoents and page ([`7610cab277c49414ea7a8524d6b2deeb50e4d4f5`](https://github.com/shinokada/svelte-5-ui-lib/commit/7610cab277c49414ea7a8524d6b2deeb50e4d4f5))
## 0.9.8
### Patch Changes
- feat: update Table components ([`353f6b4c10649a40adc4a72ec16dc88be5599481`](https://github.com/shinokada/svelte-5-ui-lib/commit/353f6b4c10649a40adc4a72ec16dc88be5599481))
## 0.9.7
### Patch Changes
- fix: badge colors ([`d83cb150a0504db8880664899f85944d669c4ad6`](https://github.com/shinokada/svelte-5-ui-lib/commit/d83cb150a0504db8880664899f85944d669c4ad6))
## 0.9.6
### Patch Changes
- feat: Tooltip component ([`46fb3bc837df0ccdc434a60374804e1d4180706a`](https://github.com/shinokada/svelte-5-ui-lib/commit/46fb3bc837df0ccdc434a60374804e1d4180706a))
## 0.9.5
### Patch Changes
- fix: type updates ([`30555a7982f82f92cdf03e26ea1812f57d357171`](https://github.com/shinokada/svelte-5-ui-lib/commit/30555a7982f82f92cdf03e26ea1812f57d357171))
## 0.9.4
### Patch Changes
- fix: Tabs and TabItem component setContext update
## 0.9.3
### Patch Changes
- fix: add hamburgerMenu to Navbar ([`aa8ce1176141a767b0d7432986806fc17103f1b1`](https://github.com/shinokada/svelte-5-ui-lib/commit/aa8ce1176141a767b0d7432986806fc17103f1b1))
## 0.9.2
### Patch Changes
- fix: remove Frame and add variants to Radio ([`7e461d5814638fb244769e4da2ecbf05eabc1c8b`](https://github.com/shinokada/svelte-5-ui-lib/commit/7e461d5814638fb244769e4da2ecbf05eabc1c8b))
## 0.9.1
### Patch Changes
- feat: variants to gradientbutton ([`6e7c3363c99ea2fbaff44c578b5793acf79c019b`](https://github.com/shinokada/svelte-5-ui-lib/commit/6e7c3363c99ea2fbaff44c578b5793acf79c019b))
## 0.9.0
### Minor Changes
- fix: change DropdownItem to DropdownUl and DropdownLi ([`f5a069d81a7aa70b057557e06d4528109622064e`](https://github.com/shinokada/svelte-5-ui-lib/commit/f5a069d81a7aa70b057557e06d4528109622064e))
## 0.8.9
### Patch Changes
- fix: Helper update ([`4bcf3008f82148d8ba0595f8538c85e3589f56ed`](https://github.com/shinokada/svelte-5-ui-lib/commit/4bcf3008f82148d8ba0595f8538c85e3589f56ed))
## 0.8.8
### Patch Changes
- feat: variants to Label and Helper ([`e9a9d03d673c7611863f4cce0cfeb1391de3b550`](https://github.com/shinokada/svelte-5-ui-lib/commit/e9a9d03d673c7611863f4cce0cfeb1391de3b550))
## 0.8.7
### Patch Changes
- feat: add variants to floating input ([`c94e217e30082fe2a323ca5c161c28e7a02f83f6`](https://github.com/shinokada/svelte-5-ui-lib/commit/c94e217e30082fe2a323ca5c161c28e7a02f83f6))
## 0.8.6
### Patch Changes
- fix: Input component ([`0443fbd838714b5a9830e7bb5e64064df33cbb02`](https://github.com/shinokada/svelte-5-ui-lib/commit/0443fbd838714b5a9830e7bb5e64064df33cbb02))
## 0.8.5
### Patch Changes
- feat: tab components ([`422a740cc67ad2fde7f4b9664afd22f8e0007e6e`](https://github.com/shinokada/svelte-5-ui-lib/commit/422a740cc67ad2fde7f4b9664afd22f8e0007e6e))
## 0.8.4
### Patch Changes
- feat: timeline ([`548335ec8de440d0622144d762902f40f7af4c9c`](https://github.com/shinokada/svelte-5-ui-lib/commit/548335ec8de440d0622144d762902f40f7af4c9c))
## 0.8.3
### Patch Changes
- fix: update variants in various components ([`9ee6411cb352d1dba2f83a78dde98745ea9db62e`](https://github.com/shinokada/svelte-5-ui-lib/commit/9ee6411cb352d1dba2f83a78dde98745ea9db62e))
## 0.8.2
### Patch Changes
- feat: add themes ([`c42201ecb1c3f2f26e8d935324aafeeb277de09c`](https://github.com/shinokada/svelte-5-ui-lib/commit/c42201ecb1c3f2f26e8d935324aafeeb277de09c))
## 0.8.1
### Patch Changes
- fix: nav/index.ts remove Nav ([`c1a15a78ef676e893305c4d4d00d476140c243da`](https://github.com/shinokada/svelte-5-ui-lib/commit/c1a15a78ef676e893305c4d4d00d476140c243da))
## 0.8.0
### Minor Changes
- feat: variants ([`a00d4f34dd05900e9ab84b93055073ba51171d7a`](https://github.com/shinokada/svelte-5-ui-lib/commit/a00d4f34dd05900e9ab84b93055073ba51171d7a))
## 0.7.2
### Patch Changes
- fix: Navbar transition ([`0437219877b09b62be4fdccdb634b52ea251fad2`](https://github.com/shinokada/svelte-5-ui-lib/commit/0437219877b09b62be4fdccdb634b52ea251fad2))
## 0.7.1
### Patch Changes
- fix: Runatics before Runes-Meta-Tag
## 0.7.0
### Minor Changes
- fix: remove withEvents
## 0.6.2
### Patch Changes
- fix: class name update
## 0.6.1
### Patch Changes
- fix: class names
- fix: class name update
## 0.6.0
### Minor Changes
- fix: extends svelte/element for typography and form components
## 0.5.6
### Patch Changes
- fix: update class names
## 0.5.5
### Patch Changes
- fix: footer classes
## 0.5.4
### Patch Changes
- fix: TableBodyCell separate onclick to button
## 0.5.3
### Patch Changes
- feat: add transition to badge
## 0.5.2
### Patch Changes
- fix: Toggle component
## 0.5.1
### Patch Changes
- fix: add target to A component
## 0.5.0
### Minor Changes
- fix: add missing attributes, target, disabled, etc.
## 0.4.13
### Patch Changes
- fix: self-closing HTML tags
## 0.4.12
### Patch Changes
- feat: add ctxclass to List/Li
## 0.4.11
### Patch Changes
- fix: update types
## 0.4.10
### Patch Changes
- fix: add </div> for closing tag for svelte@5.0.0-next.108 ([`6b8a82f0b22f7767eb2f07ff4ccaba8fe584189b`](https://github.com/shinokada/svelte-5-ui-lib/commit/6b8a82f0b22f7767eb2f07ff4ccaba8fe584189b)) tests: add components.test.ts and home.test.ts fix: update meta tags
## 0.4.9
### Patch Changes
- feat: dropdown components update ([`b3d65dd9b7ff0de0bc62ac7bdc7a9480449c936f`](https://github.com/shinokada/svelte-5-ui-lib/commit/b3d65dd9b7ff0de0bc62ac7bdc7a9480449c936f)) docs: dropdown page update
## 0.4.8
### Patch Changes
- fix: install svelte-rune-highlight that has next.100 ([`785736d03a1c1d4bc6dfdbea5f45ad39695a8b21`](https://github.com/shinokada/svelte-5-ui-lib/commit/785736d03a1c1d4bc6dfdbea5f45ad39695a8b21))
## 0.4.7
### Patch Changes
- fix: update flowbite-svelte-icons names ([`b366d721a02d447ceaeead354268434f43f2991a`](https://github.com/shinokada/svelte-5-ui-lib/commit/b366d721a02d447ceaeead354268434f43f2991a))
## 0.4.6
### Patch Changes
- fix: svelte@5.0.0next.100 installed for hmr fix ([`de65f6598082ab3ab859b3feb69f257b29880b52`](https://github.com/shinokada/svelte-5-ui-lib/commit/de65f6598082ab3ab859b3feb69f257b29880b52))
## 0.4.5
### Patch Changes
- feat: add onclick to Avatar, Button, GradientButton, Card components. ([`8805dfe9890a002104444c3e7c9293e7cd3831c7`](https://github.com/shinokada/svelte-5-ui-lib/commit/8805dfe9890a002104444c3e7c9293e7cd3831c7))
fix: update Sidebar, Drawer, Nav components
## 0.4.4
### Patch Changes
- fix: update DropdownItem and SidebarDropdownWrapper ([`c93161d02f18ec2f42cb77f808602661efa9312a`](https://github.com/shinokada/svelte-5-ui-lib/commit/c93161d02f18ec2f42cb77f808602661efa9312a))
## 0.4.3
### Patch Changes
- fix: change snippet icon to iconSlot in SidebarDropdownWrapper
## 0.4.2
### Patch Changes
- fix: SidebarItem: change icon snippet to iconSlot ([`d4c8b51c4a14fb56e7b768942b909aa792ea4022`](https://github.com/shinokada/svelte-5-ui-lib/commit/d4c8b51c4a14fb56e7b768942b909aa792ea4022))
- fix: add aclass to SidebarItem
## 0.4.1
### Patch Changes
- fix: TabItem style update ([`18e50b3218e11bd87878f919efd96e062bf5185d`](https://github.com/shinokada/svelte-5-ui-lib/commit/18e50b3218e11bd87878f919efd96e062bf5185d))
## 0.4.0
### Minor Changes
- feat: TabItem, and Tabs components ([`69db35d4d1f32ef4cfc64b34ceb982627d50009e`](https://github.com/shinokada/svelte-5-ui-lib/commit/69db35d4d1f32ef4cfc64b34ceb982627d50009e))
- docs: tab page is added
## 0.3.7
### Patch Changes
- fix: add default values to component docs ([`273e64b520543375ccd10761a5103ea4e81cae26`](https://github.com/shinokada/svelte-5-ui-lib/commit/273e64b520543375ccd10761a5103ea4e81cae26)) update: svelte next-80 fix: remove option(?) from some children docs: sidebar menu in Nav.svelte to keep open when $page.url.pathname has the directory fix: add if to Video.svelte since it is optional
## 0.3.6
### Patch Changes
- fix: add svelte type Snippet to children and other snippets ([`4624147a35d8bcde511a57f31666390cce18d084`](https://github.com/shinokada/svelte-5-ui-lib/commit/4624147a35d8bcde511a57f31666390cce18d084)) fix: add if-statement for children
## 0.3.5
### Patch Changes
- fix: card href prop ([`6164df0d0d0ad13cd121d103728fd1cf9bf7a0d5`](https://github.com/shinokada/svelte-5-ui-lib/commit/6164df0d0d0ad13cd121d103728fd1cf9bf7a0d5))
## 0.3.4
### Patch Changes
- fix: Card component update ([`f63a4a3a3f95ccb04ca876f0f043c898b8fef124`](https://github.com/shinokada/svelte-5-ui-lib/commit/f63a4a3a3f95ccb04ca876f0f043c898b8fef124))
## 0.3.3
### Patch Changes
- fix: Card component fix href prop ([`b4dc6bd0b3801b8857c81734d77b38bbdae3623c`](https://github.com/shinokada/svelte-5-ui-lib/commit/b4dc6bd0b3801b8857c81734d77b38bbdae3623c)) fix: Card component add customSize prop
## 0.3.2
### Patch Changes
- fix: add lang="ts" to context="module" ([`3081cb37fc5d78d5f8bbcb6cea7beb1aacf23ada`](https://github.com/shinokada/svelte-5-ui-lib/commit/3081cb37fc5d78d5f8bbcb6cea7beb1aacf23ada)) fix: add $state() to let variables
## 0.3.1
### Patch Changes
- fix: Table by running lib-helpers ([`fcb9cbd62909112c1d53dc5468349f716f5e9a9b`](https://github.com/shinokada/svelte-5-ui-lib/commit/fcb9cbd62909112c1d53dc5468349f716f5e9a9b))
## 0.3.0
### Minor Changes
- feat: add table components ([`970d66e9b4350f3b11160c18e0a498d989e985ef`](https://github.com/shinokada/svelte-5-ui-lib/commit/970d66e9b4350f3b11160c18e0a498d989e985ef))
## 0.2.49
### Patch Changes
- fix: add openMainMenu to control menu button for a small screen ([`ec830d9422d30e6ca4589d2cc413394336148d11`](https://github.com/shinokada/svelte-5-ui-lib/commit/ec830d9422d30e6ca4589d2cc413394336148d11))
## 0.2.48
### Patch Changes
- - 490669e fix: add if children to Navbar ([`a7cd201631728bd3ddb8b7d572bf2f33b11a2542`](https://github.com/shinokada/svelte-5-ui-lib/commit/a7cd201631728bd3ddb8b7d572bf2f33b11a2542))
## 0.2.47
### Patch Changes
- - ec25597 (HEAD -> main) fix: change to chilren?: any ([`35d2b4573ff8cf1e187637f1f3700605c01339ab`](https://github.com/shinokada/svelte-5-ui-lib/commit/35d2b4573ff8cf1e187637f1f3700605c01339ab))
- cc1482c (origin/main, origin/HEAD) fix: update links
- 66b7cd4 fix: update links
- 3644446 fix: change vercel.app to codewithshin.com
## 0.2.46
### Patch Changes
- fix: update icon names ([`ee34fc70dc928c5fec9b2d892f49d930a54a1ab0`](https://github.com/shinokada/svelte-5-ui-lib/commit/ee34fc70dc928c5fec9b2d892f49d930a54a1ab0))
- add runes: true to svelte.config.js ([`ad4dfa7c918613819617f3e75ddf85a3fceaa312`](https://github.com/shinokada/svelte-5-ui-lib/commit/ad4dfa7c918613819617f3e75ddf85a3fceaa312)) update flowbite-svelte-icons@2.0.0-next.1
## 0.2.45
### Patch Changes
- fix: update component docs ([`f76850121e7fd4b3a9b4cfcfbd813d05a2903cff`](https://github.com/shinokada/svelte-5-ui-lib/commit/f76850121e7fd4b3a9b4cfcfbd813d05a2903cff))
## 0.2.44
### Patch Changes
- fix: add type option ? to closeNav in NavBrand docs: remove closeNav from NavLi and NavBrand in md files
## 0.2.43
### Patch Changes
- fix: using setContext/getContext for Nav closeNav so that you don't need to repeat it in NavLi and NavBrand
## 0.2.42
### Patch Changes
- fix: NavLi color updates chore: lib-helpers and format
## 0.2.41
### Patch Changes
- docs: add GitHub icon, add About page, update vite.config.ts and app.d.ts to get dependencies version ([`8c8d016bff19752808fef7fd9feeade57e0a5021`](https://github.com/shinokada/svelte-5-ui-lib/commit/8c8d016bff19752808fef7fd9feeade57e0a5021))
- fix: BottomNav z-index to 30 ([`9a49998b8ada7fe45b969a4d8e2b3a127dbebac5`](https://github.com/shinokada/svelte-5-ui-lib/commit/9a49998b8ada7fe45b969a4d8e2b3a127dbebac5)) docs: header in Nav z-index to max 50
## 0.2.40
### Patch Changes
- fix: change tab indentation to spaces docs: update sidebar page fix: add 128 so that h-128 works to tailwind.config.cjs fix: add utils/PlusPlaceholder compo for sidebar page
## 0.2.39
### Patch Changes
- 2dc9328: Navbar, NavUl, NavLi update to use activeClass and nonActiveClass with context. The context is set in Navbar
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [0.2.38](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.37...v0.2.38) (2024-02-14)
### Bug Fixes
- move apexcharts to dependencies ([d95d4e5](https://github.com/shinokada/svelte-5-ui-lib/commit/d95d4e5f81880ad699a236b6907ec49147c932c2))
### [0.2.37](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.36...v0.2.37) (2024-02-08)
### Bug Fixes
- vite update and change to query: ?raw, import: default ([c8b0be9](https://github.com/shinokada/svelte-5-ui-lib/commit/c8b0be9eb831578257e2669e0cd0b24339726191))
### [0.2.36](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.35...v0.2.36) (2024-02-08)
### Features
- add Chart component ([e40ca10](https://github.com/shinokada/svelte-5-ui-lib/commit/e40ca10bf743241d513b014d1d94e7824d97f4d7))
- starting chart compo ([aefba65](https://github.com/shinokada/svelte-5-ui-lib/commit/aefba6568874034a723067cb48d46efe048ced1c))
### Bug Fixes
- Dropdown, Card, Chart ([3ab5981](https://github.com/shinokada/svelte-5-ui-lib/commit/3ab5981afae2beedd7e79a1e347aaa65e7619ecf))
- package.json ([82f2a17](https://github.com/shinokada/svelte-5-ui-lib/commit/82f2a1741055ce664f2911a5809d27085d13e8b1))
- toast page position ([0fd312b](https://github.com/shinokada/svelte-5-ui-lib/commit/0fd312bbf2c179c0911556e66ef4bc94ca032cec))
- toast position colors for dark ([dffe1a1](https://github.com/shinokada/svelte-5-ui-lib/commit/dffe1a166a0c54b40e31c45a7f0757d41634e9b9))
### [0.2.35](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.34...v0.2.35) (2024-02-08)
### Bug Fixes
- add dependencies ([7478f80](https://github.com/shinokada/svelte-5-ui-lib/commit/7478f807992238058147c503f4318bde17f843a6))
### [0.2.34](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.33...v0.2.34) (2024-02-07)
### Features
- add BottomNav and BottomNavLink compos ([545b2d7](https://github.com/shinokada/svelte-5-ui-lib/commit/545b2d751342dd3b54cf0582531f5b1132647030))
- starting bottomnav ([bcb08ee](https://github.com/shinokada/svelte-5-ui-lib/commit/bcb08ee881b0b653e7fa22cffb371d523eb83407))
### [0.2.33](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.32...v0.2.33) (2024-02-07)
### Features
- add CloseButton to badge, banner, alert and toast compos ([86dca6d](https://github.com/shinokada/svelte-5-ui-lib/commit/86dca6d631aa3a69e8d430e28361f64110cdca2a))
### [0.2.32](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.31...v0.2.32) (2024-02-06)
### Bug Fixes
- CloseButton for Badge, Alert, Banner components ([7d83836](https://github.com/shinokada/svelte-5-ui-lib/commit/7d838366f2e4daeb4a092339906d3383fd7cc4b3))
### [0.2.31](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.30...v0.2.31) (2024-02-06)
### Features
- add Alert compo ([edd5f9f](https://github.com/shinokada/svelte-5-ui-lib/commit/edd5f9f7ad768c50ea6607ddb4cea2a958ea5d43))
- add icon snippet to Badge compo ([a6700cd](https://github.com/shinokada/svelte-5-ui-lib/commit/a6700cd9c94af1184be5fa61eb7035556c2d2a55))
### [0.2.30](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.29...v0.2.30) (2024-02-06)
### [0.2.29](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.28...v0.2.29) (2024-02-06)
### Features
- add badge component ([c35be46](https://github.com/shinokada/svelte-5-ui-lib/commit/c35be461f809862382902ceb6a59427200efbf09))
### Bug Fixes
- toast page ([2050696](https://github.com/shinokada/svelte-5-ui-lib/commit/205069677e67b98927abfd2bd4e13079f6264ace))
### [0.2.28](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.26...v0.2.28) (2024-02-06)
### Features
- add toast component and page ([8d69d74](https://github.com/shinokada/svelte-5-ui-lib/commit/8d69d7486bd637c04a141eeb1da1f03d8199a749))
- starting toast ([91927bc](https://github.com/shinokada/svelte-5-ui-lib/commit/91927bc428fa1ba710738b06f15b8c3d6e204f3b))
### [0.2.27](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.24...v0.2.27) (2024-02-05)
### Features
- add component docs ([52a1711](https://github.com/shinokada/svelte-5-ui-lib/commit/52a17118029d9c75ed36e4e00344bedc39bb7b93))
### Bug Fixes
- change from atomonedark to classicdark in HighlightCompo ([d0ac7ff](https://github.com/shinokada/svelte-5-ui-lib/commit/d0ac7fff96f0019ad7980aba37207aab2e76810d))
- replace Hightlight to HighlightSvelte in HighlightCompo ([a81fd5e](https://github.com/shinokada/svelte-5-ui-lib/commit/a81fd5ed2595ddcbf5aeb36c67d55fe3d425ec61))
- sticy-navbar example ([ef1f118](https://github.com/shinokada/svelte-5-ui-lib/commit/ef1f118f85b35086acba291e653e05ab9439d9d0))
### [0.2.26](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.25...v0.2.26) (2024-02-04)
### [0.2.25](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.18...v0.2.25) (2024-02-04)
### Features
- add component docs ([52a1711](https://github.com/shinokada/svelte-5-ui-lib/commit/52a17118029d9c75ed36e4e00344bedc39bb7b93))
- add GradientButton component ([528929b](https://github.com/shinokada/svelte-5-ui-lib/commit/528929b96046dfc7d4662e2f953e1c3002b69835))
- add GradientButton component ([246037a](https://github.com/shinokada/svelte-5-ui-lib/commit/246037a76f30bf32fc369fff573df2d0bf97f0ad))
- add Toggle component ([98c6aa6](https://github.com/shinokada/svelte-5-ui-lib/commit/98c6aa63c1eb1269c8c7bd9233526d93a3e632f6))
- FloatingLabel component is added ([9b6ea52](https://github.com/shinokada/svelte-5-ui-lib/commit/9b6ea52c4e070da451e04fb59d473fdb5461ea67))
### Bug Fixes
- change from atomonedark to classicdark in HighlightCompo ([d0ac7ff](https://github.com/shinokada/svelte-5-ui-lib/commit/d0ac7fff96f0019ad7980aba37207aab2e76810d))
- icons update for flowbite-svelte-icons v1.0.4 ([549e904](https://github.com/shinokada/svelte-5-ui-lib/commit/549e9042b505d1960318d19d5d410f1b36832e61))
- nav example ([036dd5f](https://github.com/shinokada/svelte-5-ui-lib/commit/036dd5f8804ca9d32e0c43fb787898f876947f91))
- NavLi text color ([83ba5a3](https://github.com/shinokada/svelte-5-ui-lib/commit/83ba5a3e4ce231288ffced149467f5efdd677ac2))
- remove and replace SidebarDropdownItem with SidebarItem ([900d3a5](https://github.com/shinokada/svelte-5-ui-lib/commit/900d3a5f3267ed7e8aa194d5008c1f0c2756b18e))
- remove SidebarDropdownItem ([ee4ef47](https://github.com/shinokada/svelte-5-ui-lib/commit/ee4ef474bc5f51521323e7392af836e261e2bd4a))
- remove SidebarDropdownItem ([3d019df](https://github.com/shinokada/svelte-5-ui-lib/commit/3d019dfd8a0131d86ab74e74e218f56aaf46feef))
- replace Hightlight to HighlightSvelte in HighlightCompo ([a81fd5e](https://github.com/shinokada/svelte-5-ui-lib/commit/a81fd5ed2595ddcbf5aeb36c67d55fe3d425ec61))
- sticy-navbar example ([ef1f118](https://github.com/shinokada/svelte-5-ui-lib/commit/ef1f118f85b35086acba291e653e05ab9439d9d0))
### [0.2.24](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.23...v0.2.24) (2024-02-04)
### Features
- add GradientButton component ([528929b](https://github.com/shinokada/svelte-5-ui-lib/commit/528929b96046dfc7d4662e2f953e1c3002b69835))
- add GradientButton component ([246037a](https://github.com/shinokada/svelte-5-ui-lib/commit/246037a76f30bf32fc369fff573df2d0bf97f0ad))
### [0.2.23](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.22...v0.2.23) (2024-02-03)
### Bug Fixes
- remove and replace SidebarDropdownItem with SidebarItem ([900d3a5](https://github.com/shinokada/svelte-5-ui-lib/commit/900d3a5f3267ed7e8aa194d5008c1f0c2756b18e))
- remove SidebarDropdownItem ([ee4ef47](https://github.com/shinokada/svelte-5-ui-lib/commit/ee4ef474bc5f51521323e7392af836e261e2bd4a))
- remove SidebarDropdownItem ([3d019df](https://github.com/shinokada/svelte-5-ui-lib/commit/3d019dfd8a0131d86ab74e74e218f56aaf46feef))
### [0.2.22](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.21...v0.2.22) (2024-02-03)
### Features
- FloatingLabel component is added ([9b6ea52](https://github.com/shinokada/svelte-5-ui-lib/commit/9b6ea52c4e070da451e04fb59d473fdb5461ea67))
### [0.2.21](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.20...v0.2.21) (2024-02-03)
### Features
- add Toggle component ([98c6aa6](https://github.com/shinokada/svelte-5-ui-lib/commit/98c6aa63c1eb1269c8c7bd9233526d93a3e632f6))
### Bug Fixes
- nav example ([036dd5f](https://github.com/shinokada/svelte-5-ui-lib/commit/036dd5f8804ca9d32e0c43fb787898f876947f91))
### [0.2.20](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.19...v0.2.20) (2024-02-02)
### Bug Fixes
- NavLi text color ([83ba5a3](https://github.com/shinokada/svelte-5-ui-lib/commit/83ba5a3e4ce231288ffced149467f5efdd677ac2))
### [0.2.19](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.17...v0.2.19) (2024-02-02)
### Features
- add Checkbox component ([ace15d4](https://github.com/shinokada/svelte-5-ui-lib/commit/ace15d43be6385206de9bed3284172a3ceb49a7f))
### Bug Fixes
- icons update for flowbite-svelte-icons v1.0.4 ([549e904](https://github.com/shinokada/svelte-5-ui-lib/commit/549e9042b505d1960318d19d5d410f1b36832e61))
### [0.2.18](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.12...v0.2.18) (2024-02-01)
### Features
- add Checkbox component ([ace15d4](https://github.com/shinokada/svelte-5-ui-lib/commit/ace15d43be6385206de9bed3284172a3ceb49a7f))
- add list-group components and page ([f05eea0](https://github.com/shinokada/svelte-5-ui-lib/commit/f05eea07f833501cd144e4b67e0bb6f6c58add77))
- add list-group components and page ([1653fd2](https://github.com/shinokada/svelte-5-ui-lib/commit/1653fd25bf159350378a83d67afea18f2cef9c91))
- add MetaTag ([8a56bcc](https://github.com/shinokada/svelte-5-ui-lib/commit/8a56bccf951aa75636f5b2eb40421187f01e6a7c))
- add range component, page, and test ([66d1ee9](https://github.com/shinokada/svelte-5-ui-lib/commit/66d1ee923db0342b2cb0f5cd9966b222bfa06124))
- add Range, Radio, Helper, RadioButton components ([254fbf5](https://github.com/shinokada/svelte-5-ui-lib/commit/254fbf5d27268bf8174751a953ab02ac314b7664))
- add rating components and page ([dc2a40b](https://github.com/shinokada/svelte-5-ui-lib/commit/dc2a40b87a8e8d98b93f8a8610129a665098bb1f))
### Bug Fixes
- add activeclass to dropdown ([86a210d](https://github.com/shinokada/svelte-5-ui-lib/commit/86a210d2bb1a936808ac90ebd8f99aed0acf40ac))
- add kit to peerDependencies ([f82cb7d](https://github.com/shinokada/svelte-5-ui-lib/commit/f82cb7dd1c84879e17b1010ee5074c1a5a5704cc))
- gallery page for Safari hack ([27a1ac7](https://github.com/shinokada/svelte-5-ui-lib/commit/27a1ac7f1f96558f3fe6c118e1ba9f0976479246))
- list-group md ([3e115ed](https://github.com/shinokada/svelte-5-ui-lib/commit/3e115ed6dd870339a7a516d814a880b17692b429))
- list-group page ([81865ee](https://github.com/shinokada/svelte-5-ui-lib/commit/81865ee918eaa8270910816a078c111bd956d153))
- MetaTag ([9874d0d](https://github.com/shinokada/svelte-5-ui-lib/commit/9874d0deb752f31e1dce42a7d0e2bd4ddb9a7079))
- remove tabindex=-1 ([ff4c440](https://github.com/shinokada/svelte-5-ui-lib/commit/ff4c44070d739ede4b98aa1418c161108ebf5c71))
### [0.2.17](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.16...v0.2.17) (2024-02-01)
### Features
- add Range, Radio, Helper, RadioButton components ([254fbf5](https://github.com/shinokada/svelte-5-ui-lib/commit/254fbf5d27268bf8174751a953ab02ac314b7664))
### [0.2.16](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.15...v0.2.16) (2024-01-31)
### Features
- add range component, page, and test ([66d1ee9](https://github.com/shinokada/svelte-5-ui-lib/commit/66d1ee923db0342b2cb0f5cd9966b222bfa06124))
### [0.2.15](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.14...v0.2.15) (2024-01-31)
### Features
- add rating components and page ([dc2a40b](https://github.com/shinokada/svelte-5-ui-lib/commit/dc2a40b87a8e8d98b93f8a8610129a665098bb1f))
### Bug Fixes
- list-group md ([3e115ed](https://github.com/shinokada/svelte-5-ui-lib/commit/3e115ed6dd870339a7a516d814a880b17692b429))
- list-group page ([81865ee](https://github.com/shinokada/svelte-5-ui-lib/commit/81865ee918eaa8270910816a078c111bd956d153))
### [0.2.14](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.13...v0.2.14) (2024-01-30)
### Features
- add list-group components and page ([f05eea0](https://github.com/shinokada/svelte-5-ui-lib/commit/f05eea07f833501cd144e4b67e0bb6f6c58add77))
- add MetaTag ([8a56bcc](https://github.com/shinokada/svelte-5-ui-lib/commit/8a56bccf951aa75636f5b2eb40421187f01e6a7c))
### Bug Fixes
- MetaTag ([9874d0d](https://github.com/shinokada/svelte-5-ui-lib/commit/9874d0deb752f31e1dce42a7d0e2bd4ddb9a7079))
### [0.2.13](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.10...v0.2.13) (2024-01-30)
### Features
- add FooterIcon ([3320f2f](https://github.com/shinokada/svelte-5-ui-lib/commit/3320f2f836ba5b4f3dc9bf9bef5d0ee2fd3a6a20))
- add list-group components and page ([1653fd2](https://github.com/shinokada/svelte-5-ui-lib/commit/1653fd25bf159350378a83d67afea18f2cef9c91))
### Bug Fixes
- add activeclass to dropdown ([86a210d](https://github.com/shinokada/svelte-5-ui-lib/commit/86a210d2bb1a936808ac90ebd8f99aed0acf40ac))
- add kit to peerDependencies ([f82cb7d](https://github.com/shinokada/svelte-5-ui-lib/commit/f82cb7dd1c84879e17b1010ee5074c1a5a5704cc))
- dropdown add classes ([5d31d80](https://github.com/shinokada/svelte-5-ui-lib/commit/5d31d8023a08669595928b69818ca63626be2ba0))
- gallery page for Safari hack ([27a1ac7](https://github.com/shinokada/svelte-5-ui-lib/commit/27a1ac7f1f96558f3fe6c118e1ba9f0976479246))
- remove tabindex=-1 ([ff4c440](https://github.com/shinokada/svelte-5-ui-lib/commit/ff4c44070d739ede4b98aa1418c161108ebf5c71))
### [0.2.12](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.11...v0.2.12) (2024-01-27)
### Features
- add FooterIcon ([3320f2f](https://github.com/shinokada/svelte-5-ui-lib/commit/3320f2f836ba5b4f3dc9bf9bef5d0ee2fd3a6a20))
### [0.2.11](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.12...v0.2.11) (2024-01-27)
### Features
- add ...attributes ([d5f6801](https://github.com/shinokada/svelte-5-ui-lib/commit/d5f68017255db97c944578d19f85512e4dea02ff))
- add A/link component ([61fe4fe](https://github.com/shinokada/svelte-5-ui-lib/commit/61fe4fe0281ce8e4912e54e4dee8e3028abf8921))
- add all skeleton components ([4ee9e0f](https://github.com/shinokada/svelte-5-ui-lib/commit/4ee9e0f703829add4b5b992a1be012e7ecfcb242))
- add Avatar component ([690fd88](https://github.com/shinokada/svelte-5-ui-lib/commit/690fd88e7cdf98dfda372325f64828a087e86440))
- add Blockquote component and page ([9464203](https://github.com/shinokada/svelte-5-ui-lib/commit/9464203f8b33995f9c5233d524f108ef6443b94c))
- add breadcrumb ([ce7297a](https://github.com/shinokada/svelte-5-ui-lib/commit/ce7297a65758fe3dd8d58e91209f6e270c6601eb))
- add Button ([b58554f](https://github.com/shinokada/svelte-5-ui-lib/commit/b58554f69daf90d231693cd995029283fd1b2074))
- add darkmode ([4d54e6e](https://github.com/shinokada/svelte-5-ui-lib/commit/4d54e6e28c90738205e27c76ba5caa539418c0be))
- add DescriptionList, List, Li components ([2dbd24c](https://github.com/shinokada/svelte-5-ui-lib/commit/2dbd24c62a39284a7b121465356e24f8647ce24e))
- add gen:exports to package.json ([7dc8667](https://github.com/shinokada/svelte-5-ui-lib/commit/7dc866780a998c961881daa10a905ff7f79bd2f0))
- add Hr component and page ([1edfc62](https://github.com/shinokada/svelte-5-ui-lib/commit/1edfc621463ab8fe18bb6f3780def330fa69fce1))
- add Indicator component ([9f26ca6](https://github.com/shinokada/svelte-5-ui-lib/commit/9f26ca630ee7bd1c1c4e571f2e2b271dd27428e8))
- add installation to home ([6709385](https://github.com/shinokada/svelte-5-ui-lib/commit/6709385007fd721c43487c4f4732f0a661883f5c))
- add kbd ([a0c9fd3](https://github.com/shinokada/svelte-5-ui-lib/commit/a0c9fd355d56634c0dcce70ebe656d9a06069333))
- add P component ([6628e5b](https://github.com/shinokada/svelte-5-ui-lib/commit/6628e5bb805a77b7c3c3d825f4ad7b86b096b82c))
- add Select and Label ([264e1cd](https://github.com/shinokada/svelte-5-ui-lib/commit/264e1cd38f010071430df86e3968d5ea1770dd9c))
- add SidebarDropdownWrapper and doc page ([1496b6f](https://github.com/shinokada/svelte-5-ui-lib/commit/1496b6f03b7c5d32eecbcd3daf998423ac8702e8))
- add skeleton ([493e67d](https://github.com/shinokada/svelte-5-ui-lib/commit/493e67d5ac6bb6e95f610eea0c7a4350e2ac8d66))
- add tests ([f3cff31](https://github.com/shinokada/svelte-5-ui-lib/commit/f3cff316159c1e55973c6a5b541561d099152c06))
- add video component ([eed2b81](https://github.com/shinokada/svelte-5-ui-lib/commit/eed2b819885b387151cfab8ff95e6b7c00035e04))
- adding Sidebar compos ([7b6b443](https://github.com/shinokada/svelte-5-ui-lib/commit/7b6b443e324ef0b0cd5e0bc97a400ed6ad05f08b))
- banner ([6cb2905](https://github.com/shinokada/svelte-5-ui-lib/commit/6cb2905a924596227199c539e4ba1575783cb1b4))
- ButtonGroup component ([c416d36](https://github.com/shinokada/svelte-5-ui-lib/commit/c416d3666576ab0fa84759423749aebf05c33275))
- Card update ([1a93ae5](https://github.com/shinokada/svelte-5-ui-lib/commit/1a93ae53b884648e390f5fbf2b8656e2e8eef343))
- classes update ([7dc26f6](https://github.com/shinokada/svelte-5-ui-lib/commit/7dc26f6b04662d79bb7ba80fa3085e2c376626f5))
- complete drawer compo ([110dbaa](https://github.com/shinokada/svelte-5-ui-lib/commit/110dbaab071b5d36b517b439f6e75268414d040c))
- drawer update ([005b3ee](https://github.com/shinokada/svelte-5-ui-lib/commit/005b3eeaa61b78395ffd967b94539d81c0ee6eb7))
- progressbar ([0a0c40e](https://github.com/shinokada/svelte-5-ui-lib/commit/0a0c40e4518d4e4f59eb6dcc8bdc4b14c9a08e7b))
- spinner ([5c7de96](https://github.com/shinokada/svelte-5-ui-lib/commit/5c7de96c2c10a3f729db25ca6a2722ee20de2074))
- use import.meta.glob for md files ([c15c9f8](https://github.com/shinokada/svelte-5-ui-lib/commit/c15c9f8971b50f995b91b78dd0ccea3505bb535b))
### Bug Fixes
- 2xl to xxl ([9967420](https://github.com/shinokada/svelte-5-ui-lib/commit/99674200830818fa8d5417c41164b7c5a37b6fb0))
- class to proper names ([61ddb7a](https://github.com/shinokada/svelte-5-ui-lib/commit/61ddb7acda8c2425a6c6bd0a52a699ee36d3e9a1))
- class update for drawer and dropdown ([583eddf](https://github.com/shinokada/svelte-5-ui-lib/commit/583eddfe8000a1843c2fc3d021712995a387ab21))
- class update in Darkmode and Drawer ([2f01cd2](https://github.com/shinokada/svelte-5-ui-lib/commit/2f01cd2b7f969d44a7312351482167bbfd6698f1))
- Darkmode, cleanup Button ([9f2c5fa](https://github.com/shinokada/svelte-5-ui-lib/commit/9f2c5fa867a2d779ca207ea3f3081298604f84bd))
- dropdown add classes ([5d31d80](https://github.com/shinokada/svelte-5-ui-lib/commit/5d31d8023a08669595928b69818ca63626be2ba0))
- HighlightCompo ([8906fab](https://github.com/shinokada/svelte-5-ui-lib/commit/8906fab15825b70634797e30ab53ff2dd4af576b))
- Label ([62f5245](https://github.com/shinokada/svelte-5-ui-lib/commit/62f52459f2676fd89f8b2c5d9da0ab6bb02af1f0))
- Label ([2b7b645](https://github.com/shinokada/svelte-5-ui-lib/commit/2b7b6456cf0b8b2c374a4b7955284f3d74aed5a2))
- Nav and Sidemenu style ([a027d54](https://github.com/shinokada/svelte-5-ui-lib/commit/a027d5443e1bf0f32112223d5977670fc82256dc))
- Nav sidebar update ([4374cac](https://github.com/shinokada/svelte-5-ui-lib/commit/4374cacb86cdac09e30f518e2e3bfab5183bdc82))
- nav update ([52c16f4](https://github.com/shinokada/svelte-5-ui-lib/commit/52c16f43ee683c90c94460232b72a4d3f6c18181))
- navbar breakpoint css ([fc544e2](https://github.com/shinokada/svelte-5-ui-lib/commit/fc544e27cf4f5701832873e6ece33faa4ada6e6d))
- NavUl update ([af6b733](https://github.com/shinokada/svelte-5-ui-lib/commit/af6b733bfc5d1058e633c4dcb3800fea363e7e80))
- NavUl update ([0473a4e](https://github.com/shinokada/svelte-5-ui-lib/commit/0473a4ef4799770b12a741f12b3c71b40bde0113))
- progress sidebar menu ([81a106d](https://github.com/shinokada/svelte-5-ui-lib/commit/81a106d463c52df6051e80fd147d07f687557b4b))
- SidebarDropdownWrapper opens update ([b82f584](https://github.com/shinokada/svelte-5-ui-lib/commit/b82f58499b5a0eddb80944d29a2d7f7762b7ce0c))
- typo ([0abaa14](https://github.com/shinokada/svelte-5-ui-lib/commit/0abaa1480b12088451505df9219cd5d8e124be97))
- typo ([45d88a0](https://github.com/shinokada/svelte-5-ui-lib/commit/45d88a029059f802799d8e4e8a36904538256f87))
### [0.2.10](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.9...v0.2.10) (2024-01-27)
### Bug Fixes
- SidebarDropdownWrapper opens update ([b82f584](https://github.com/shinokada/svelte-5-ui-lib/commit/b82f58499b5a0eddb80944d29a2d7f7762b7ce0c))
### [0.2.9](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.8...v0.2.9) (2024-01-26)
### [0.2.8](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.7...v0.2.8) (2024-01-25)
### Features
- add Avatar component ([690fd88](https://github.com/shinokada/svelte-5-ui-lib/commit/690fd88e7cdf98dfda372325f64828a087e86440))
### [0.2.7](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.6...v0.2.7) (2024-01-25)
### [0.2.6](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.5...v0.2.6) (2024-01-25)
### Features
- ButtonGroup component ([c416d36](https://github.com/shinokada/svelte-5-ui-lib/commit/c416d3666576ab0fa84759423749aebf05c33275))
### [0.2.5](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.4...v0.2.5) (2024-01-25)
### Features
- add video component ([eed2b81](https://github.com/shinokada/svelte-5-ui-lib/commit/eed2b819885b387151cfab8ff95e6b7c00035e04))
### [0.2.4](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.3...v0.2.4) (2024-01-24)
### Features
- add DescriptionList, List, Li components ([2dbd24c](https://github.com/shinokada/svelte-5-ui-lib/commit/2dbd24c62a39284a7b121465356e24f8647ce24e))
### [0.2.3](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.2...v0.2.3) (2024-01-24)
### Features
- add A/link component ([61fe4fe](https://github.com/shinokada/svelte-5-ui-lib/commit/61fe4fe0281ce8e4912e54e4dee8e3028abf8921))
- add Hr component and page ([1edfc62](https://github.com/shinokada/svelte-5-ui-lib/commit/1edfc621463ab8fe18bb6f3780def330fa69fce1))
### Bug Fixes
- Nav sidebar update ([4374cac](https://github.com/shinokada/svelte-5-ui-lib/commit/4374cacb86cdac09e30f518e2e3bfab5183bdc82))
### [0.2.2](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.2.1...v0.2.2) (2024-01-24)
### Features
- add Blockquote component and page ([9464203](https://github.com/shinokada/svelte-5-ui-lib/commit/9464203f8b33995f9c5233d524f108ef6443b94c))
- add P component ([6628e5b](https://github.com/shinokada/svelte-5-ui-lib/commit/6628e5bb805a77b7c3c3d825f4ad7b86b096b82c))
### [0.2.1](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.35...v0.2.1) (2024-01-23)
### Features
- Card update ([1a93ae5](https://github.com/shinokada/svelte-5-ui-lib/commit/1a93ae53b884648e390f5fbf2b8656e2e8eef343))
- classes update ([7dc26f6](https://github.com/shinokada/svelte-5-ui-lib/commit/7dc26f6b04662d79bb7ba80fa3085e2c376626f5))
### Bug Fixes
- class to proper names ([61ddb7a](https://github.com/shinokada/svelte-5-ui-lib/commit/61ddb7acda8c2425a6c6bd0a52a699ee36d3e9a1))
- class update for drawer and dropdown ([583eddf](https://github.com/shinokada/svelte-5-ui-lib/commit/583eddfe8000a1843c2fc3d021712995a387ab21))
- class update in Darkmode and Drawer ([2f01cd2](https://github.com/shinokada/svelte-5-ui-lib/commit/2f01cd2b7f969d44a7312351482167bbfd6698f1))
- Nav and Sidemenu style ([a027d54](https://github.com/shinokada/svelte-5-ui-lib/commit/a027d5443e1bf0f32112223d5977670fc82256dc))
- progress sidebar menu ([81a106d](https://github.com/shinokada/svelte-5-ui-lib/commit/81a106d463c52df6051e80fd147d07f687557b4b))
### [0.1.35](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.34...v0.1.35) (2024-01-22)
### [0.1.34](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.33...v0.1.34) (2024-01-22)
### Features
- complete drawer compo ([110dbaa](https://github.com/shinokada/svelte-5-ui-lib/commit/110dbaab071b5d36b517b439f6e75268414d040c))
- drawer update ([005b3ee](https://github.com/shinokada/svelte-5-ui-lib/commit/005b3eeaa61b78395ffd967b94539d81c0ee6eb7))
### [0.1.33](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.32...v0.1.33) (2024-01-21)
### Bug Fixes
- Label ([62f5245](https://github.com/shinokada/svelte-5-ui-lib/commit/62f52459f2676fd89f8b2c5d9da0ab6bb02af1f0))
### [0.1.32](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.31...v0.1.32) (2024-01-20)
### Bug Fixes
- NavUl update ([af6b733](https://github.com/shinokada/svelte-5-ui-lib/commit/af6b733bfc5d1058e633c4dcb3800fea363e7e80))
### [0.1.31](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.30...v0.1.31) (2024-01-20)
### Features
- use import.meta.glob for md files ([c15c9f8](https://github.com/shinokada/svelte-5-ui-lib/commit/c15c9f8971b50f995b91b78dd0ccea3505bb535b))
### Bug Fixes
- Label ([2b7b645](https://github.com/shinokada/svelte-5-ui-lib/commit/2b7b6456cf0b8b2c374a4b7955284f3d74aed5a2))
- NavUl update ([0473a4e](https://github.com/shinokada/svelte-5-ui-lib/commit/0473a4ef4799770b12a741f12b3c71b40bde0113))
- typo ([0abaa14](https://github.com/shinokada/svelte-5-ui-lib/commit/0abaa1480b12088451505df9219cd5d8e124be97))
### [0.1.30](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.29...v0.1.30) (2024-01-18)
### Features
- add Select and Label ([264e1cd](https://github.com/shinokada/svelte-5-ui-lib/commit/264e1cd38f010071430df86e3968d5ea1770dd9c))
### [0.1.29](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.28...v0.1.29) (2024-01-17)
### Features
- add kbd ([a0c9fd3](https://github.com/shinokada/svelte-5-ui-lib/commit/a0c9fd355d56634c0dcce70ebe656d9a06069333))
### Bug Fixes
- navbar breakpoint css ([fc544e2](https://github.com/shinokada/svelte-5-ui-lib/commit/fc544e27cf4f5701832873e6ece33faa4ada6e6d))
### [0.1.28](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.27...v0.1.28) (2024-01-15)
### Features
- progressbar ([0a0c40e](https://github.com/shinokada/svelte-5-ui-lib/commit/0a0c40e4518d4e4f59eb6dcc8bdc4b14c9a08e7b))
### [0.1.27](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.26...v0.1.27) (2024-01-15)
### Features
- spinner ([5c7de96](https://github.com/shinokada/svelte-5-ui-lib/commit/5c7de96c2c10a3f729db25ca6a2722ee20de2074))
### Bug Fixes
- Darkmode, cleanup Button ([9f2c5fa](https://github.com/shinokada/svelte-5-ui-lib/commit/9f2c5fa867a2d779ca207ea3f3081298604f84bd))
- nav update ([52c16f4](https://github.com/shinokada/svelte-5-ui-lib/commit/52c16f43ee683c90c94460232b72a4d3f6c18181))
### [0.1.26](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.25...v0.1.26) (2024-01-14)
### Features
- add Indicator component ([9f26ca6](https://github.com/shinokada/svelte-5-ui-lib/commit/9f26ca630ee7bd1c1c4e571f2e2b271dd27428e8))
### [0.1.25](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.24...v0.1.25) (2024-01-14)
### Features
- banner ([6cb2905](https://github.com/shinokada/svelte-5-ui-lib/commit/6cb2905a924596227199c539e4ba1575783cb1b4))
### [0.1.24](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.23...v0.1.24) (2024-01-14)
### Features
- add darkmode ([4d54e6e](https://github.com/shinokada/svelte-5-ui-lib/commit/4d54e6e28c90738205e27c76ba5caa539418c0be))
### Bug Fixes
- 2xl to xxl ([9967420](https://github.com/shinokada/svelte-5-ui-lib/commit/99674200830818fa8d5417c41164b7c5a37b6fb0))
- typo ([45d88a0](https://github.com/shinokada/svelte-5-ui-lib/commit/45d88a029059f802799d8e4e8a36904538256f87))
### [0.1.23](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.22...v0.1.23) (2024-01-13)
### Features
- add all skeleton components ([4ee9e0f](https://github.com/shinokada/svelte-5-ui-lib/commit/4ee9e0f703829add4b5b992a1be012e7ecfcb242))
- add breadcrumb ([ce7297a](https://github.com/shinokada/svelte-5-ui-lib/commit/ce7297a65758fe3dd8d58e91209f6e270c6601eb))
### [0.1.22](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.21...v0.1.22) (2024-01-12)
### Features
- add gen:exports to package.json ([7dc8667](https://github.com/shinokada/svelte-5-ui-lib/commit/7dc866780a998c961881daa10a905ff7f79bd2f0))
- add skeleton ([493e67d](https://github.com/shinokada/svelte-5-ui-lib/commit/493e67d5ac6bb6e95f610eea0c7a4350e2ac8d66))
### [0.1.21](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.20...v0.1.21) (2024-01-12)
### [0.1.20](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.19...v0.1.20) (2024-01-12)
### [0.1.19](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.18...v0.1.19) (2024-01-12)
### [0.1.18](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.17...v0.1.18) (2024-01-12)
### [0.1.17](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.16...v0.1.17) (2024-01-12)
### Features
- add installation to home ([6709385](https://github.com/shinokada/svelte-5-ui-lib/commit/6709385007fd721c43487c4f4732f0a661883f5c))
- add SidebarDropdownWrapper and doc page ([1496b6f](https://github.com/shinokada/svelte-5-ui-lib/commit/1496b6f03b7c5d32eecbcd3daf998423ac8702e8))
- add tests ([f3cff31](https://github.com/shinokada/svelte-5-ui-lib/commit/f3cff316159c1e55973c6a5b541561d099152c06))
- adding Sidebar compos ([7b6b443](https://github.com/shinokada/svelte-5-ui-lib/commit/7b6b443e324ef0b0cd5e0bc97a400ed6ad05f08b))
### [0.1.16](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.15...v0.1.16) (2024-01-11)
### Features
- add ...attributes ([d5f6801](https://github.com/shinokada/svelte-5-ui-lib/commit/d5f68017255db97c944578d19f85512e4dea02ff))
### [0.1.15](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.14...v0.1.15) (2024-01-11)
### [0.1.14](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.13...v0.1.14) (2024-01-11)
### 0.1.13 (2024-01-11)
### Features
- add breakPoint prop ([02cb5a2](https://github.com/shinokada/svelte-5-ui-lib/commit/02cb5a2b76973b81c3f4acd7c26022fdbbdd0c6b))
- add breakPoint prop ([49f8d25](https://github.com/shinokada/svelte-5-ui-lib/commit/49f8d254bda9e1c6f18b3eafead9254d44d5a5e1))
- add Button ([b58554f](https://github.com/shinokada/svelte-5-ui-lib/commit/b58554f69daf90d231693cd995029283fd1b2074))
- add dropdown components and page ([0013f22](https://github.com/shinokada/svelte-5-ui-lib/commit/0013f229d490d0930295df1b9427f67a6acc1853))
- add footer ([801a59e](https://github.com/shinokada/svelte-5-ui-lib/commit/801a59e120a0a6083f122b9f5a3e4d910d214a02))
- add package tools ([cb06870](https://github.com/shinokada/svelte-5-ui-lib/commit/cb0687043fb11dada1f9fe3c388b554ad95162a1))
### Bug Fixes
- add children to NavBrand ([51b141d](https://github.com/shinokada/svelte-5-ui-lib/commit/51b141de2f086a8234c041812d630cbc8ad8a6e9))
- add keywords to package ([6388216](https://github.com/shinokada/svelte-5-ui-lib/commit/6388216fea2d7b0b68b432be63cbb4b4ad1bd8ea))
- add peerDependencies ([d5b27d1](https://github.com/shinokada/svelte-5-ui-lib/commit/d5b27d17fbd602abe8c19c8c5809e8fdc0dce15b))
- add types ([e315f88](https://github.com/shinokada/svelte-5-ui-lib/commit/e315f88c20d596dfbbd01d2d49cb4a71471ec512))
- FooterBrand ([b572aec](https://github.com/shinokada/svelte-5-ui-lib/commit/b572aecf4347ecb54393ad9444f52fe7366a11a4))
- HighlightCompo ([8906fab](https://github.com/shinokada/svelte-5-ui-lib/commit/8906fab15825b70634797e30ab53ff2dd4af576b))
- update peerDependencies in package.json ([951b391](https://github.com/shinokada/svelte-5-ui-lib/commit/951b3910b84f7a21946f8e760814dedc1d6b90af))
### [0.1.12](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.11...v0.1.12) (2024-01-08)
### [0.1.11](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.10...v0.1.11) (2024-01-08)
### Features
- add dropdown components and page ([0013f22](https://github.com/shinokada/svelte-5-ui-lib/commit/0013f229d490d0930295df1b9427f67a6acc1853))
### [0.1.10](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.9...v0.1.10) (2024-01-08)
### Features
- add breakPoint prop ([02cb5a2](https://github.com/shinokada/svelte-5-ui-lib/commit/02cb5a2b76973b81c3f4acd7c26022fdbbdd0c6b))
### [0.1.9](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.8...v0.1.9) (2024-01-08)
### [0.1.8](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.7...v0.1.8) (2024-01-08)
### Features
- add breakPoint prop ([49f8d25](https://github.com/shinokada/svelte-5-ui-lib/commit/49f8d254bda9e1c6f18b3eafead9254d44d5a5e1))
### [0.1.7](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.6...v0.1.7) (2024-01-08)
### Bug Fixes
- add children to NavBrand ([51b141d](https://github.com/shinokada/svelte-5-ui-lib/commit/51b141de2f086a8234c041812d630cbc8ad8a6e9))
### [0.1.6](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.5...v0.1.6) (2024-01-08)
### Bug Fixes
- add keywords to package ([6388216](https://github.com/shinokada/svelte-5-ui-lib/commit/6388216fea2d7b0b68b432be63cbb4b4ad1bd8ea))
### [0.1.5](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.4...v0.1.5) (2024-01-08)
### [0.1.4](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.3...v0.1.4) (2024-01-08)
### Bug Fixes
- add types ([e315f88](https://github.com/shinokada/svelte-5-ui-lib/commit/e315f88c20d596dfbbd01d2d49cb4a71471ec512))
### [0.1.3](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.2...v0.1.3) (2024-01-08)
### Bug Fixes
- update peerDependencies in package.json ([951b391](https://github.com/shinokada/svelte-5-ui-lib/commit/951b3910b84f7a21946f8e760814dedc1d6b90af))
### [0.1.2](https://github.com/shinokada/svelte-5-ui-lib/compare/v0.1.1...v0.1.2) (2024-01-08)
### Bug Fixes
- add peerDependencies ([d5b27d1](https://github.com/shinokada/svelte-5-ui-lib/commit/d5b27d17fbd602abe8c19c8c5809e8fdc0dce15b))
### 0.1.1 (2024-01-08)
### Features
- add footer ([801a59e](https://github.com/shinokada/svelte-5-ui-lib/commit/801a59e120a0a6083f122b9f5a3e4d910d214a02))
- add package tools ([cb06870](https://github.com/shinokada/svelte-5-ui-lib/commit/cb0687043fb11dada1f9fe3c388b554ad95162a1))
### Bug Fixes
- FooterBrand ([b572aec](https://github.com/shinokada/svelte-5-ui-lib/commit/b572aecf4347ecb54393ad9444f52fe7366a11a4))
================================================
FILE: License
================================================
MIT License
Copyright (c) 2022 Flowbite Svelte (created by Shinichi Okada)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Svelte 5 UI Lib (Now merged with [Flowbite Svelte](https://flowbite-svelte.com/))
Svelte 5 UI Lib is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.
- [Docs](https://svelte-5-ui-lib.codewithshin.com/)
## Installation
Install `sveltekit`, `tailwindcss`, and `svelte-5-ui-lib`, update dependencies to install the latest:
```sh
npx sv create myapp // select to install tailwindcss
cd myapp
pnpm i -D svelte-5-ui-lib
pnpm run dev
```
## License
MIT
================================================
FILE: e2e/alert.test.ts
================================================
import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
console.log(`Running ${test.info().title}`);
await page.goto('/components/alert');
});
test('alert page has expected h1', async ({ page }) => {
expect(await page.textContent('h1')).toContain('Alert');
});
test('alert page has expected meta title', async ({ page }) => {
await expect(page).toHaveTitle('Alert - Svelte 5 Ui Lib');
});
test('alert page has expected meta description', async ({ page }) => {
const metaDescription = page.locator('meta[name="description"]');
await expect(metaDescription).toHaveAttribute('content', 'Alert component for Svelte 5 Runes.');
});
test('alert page has expected meta keywords', async ({ page }) => {
const metaKeywords = page.locator('meta[name="keywords"]');
await expect(metaKeywords).toHaveAttribute('content', 'svelte, runes, ui, components, library');
});
test('alert page has expected meta og', async ({ page }) => {
const metaOgTitle = page.locator('meta[property="og:title"]');
await expect(metaOgTitle).toHaveAttribute('content', 'Alert - Svelte 5 Ui Lib');
const metaOgDescription = page.locator('meta[property="og:description"]');
await expect(metaOgDescription).toHaveAttribute('content', 'Alert component for Svelte 5 Runes.');
const metaOgUrl = page.locator('meta[property="og:url"]');
await expect(metaOgUrl).toHaveAttribute('content', 'http://localhost:4173/components/alert');
const metaOgImage = page.locator('meta[property="og:image"]');
await expect(metaOgImage).toHaveAttribute(
'content',
'https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib?title=Alert'
);
});
test('alert page has expected meta twitter', async ({ page }) => {
const metaTwitterTitle = page.locator('meta[name="twitter:title"]');
await expect(metaTwitterTitle).toHaveAttribute('content', 'Alert - Svelte 5 Ui Lib');
const metaTwitterDescription = page.locator('meta[name="twitter:description"]');
await expect(metaTwitterDescription).toHaveAttribute(
'content',
'Alert component for Svelte 5 Runes.'
);
const metaTwitterImage = page.locator('meta[name="twitter:image"]');
await expect(metaTwitterImage).toHaveAttribute(
'content',
'https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib?title=Alert'
);
});
================================================
FILE: e2e/components.test.ts
================================================
import { expect, test } from '@playwright/test';
test('accordion page has expected h1', async ({ page }) => {
await page.goto('/components/accordion');
expect(await page.textContent('h1')).toContain('Accordion');
});
test('alet page has expected h1', async ({ page }) => {
await page.goto('/components/alert');
expect(await page.textContent('h1')).toContain('Alert');
});
test('avatar page has expected h1', async ({ page }) => {
await page.goto('/components/avatar');
expect(await page.textContent('h1')).toContain('Avatar');
});
test('badge page has expected h1', async ({ page }) => {
await page.goto('/components/badge');
expect(await page.textContent('h1')).toContain('Badge');
});
test('banner page has expected h1', async ({ page }) => {
await page.goto('/components/banner');
expect(await page.textContent('h1')).toContain('Banner');
});
test('bottom navigation page has expected h1', async ({ page }) => {
await page.goto('/components/bottom-navigation');
expect(await page.textContent('h1')).toContain('Bottom navigation');
});
test('breadcrumb page has expected h1', async ({ page }) => {
await page.goto('/components/breadcrumb');
expect(await page.textContent('h1')).toContain('Breadcrumb');
});
test('button page has expected h1', async ({ page }) => {
await page.goto('/components/button');
expect(await page.textContent('h1')).toBe('Buttons');
});
test('button group page has expected h1', async ({ page }) => {
await page.goto('/components/button-group');
expect(await page.textContent('h1')).toBe('Button group');
});
test('cards page has expected h1', async ({ page }) => {
await page.goto('/components/card');
expect(await page.textContent('h1')).toBe('Cards');
});
test('carousel page has expected h1', async ({ page }) => {
await page.goto('/components/carousel');
expect(await page.textContent('h1')).toContain('Carousel');
});
test('darkmode page has expected h1', async ({ page }) => {
await page.goto('/components/darkmode');
expect(await page.textContent('h1')).toBe('Darkmode');
});
test('device mockup page has expected h1', async ({ page }) => {
await page.goto('/components/device-mockup');
expect(await page.textContent('h1')).toBe('Device mockup');
});
test('drawer page has expected h1', async ({ page }) => {
await page.goto('/components/drawer');
expect(await page.textContent('h1')).toContain('Drawer');
});
test('dropdown page has expected h1', async ({ page }) => {
await page.goto('/components/dropdown');
expect(await page.textContent('h1')).toBe('Dropdown');
});
test('footer page has expected h1', async ({ page }) => {
await page.goto('/components/footer');
expect(await page.textContent('h1')).toBe('Footer');
});
test('gallery page has expected h1', async ({ page }) => {
await page.goto('/components/gallery');
expect(await page.textContent('h1')).toContain('Gallery');
});
test('indicator page has expected h1', async ({ page }) => {
await page.goto('/components/indicators');
expect(await page.textContent('h1')).toContain('Indicator');
});
test('kbd page has expected h1', async ({ page }) => {
await page.goto('/components/kbd');
expect(await page.textContent('h1')).toContain('KBD (Keyboard)');
});
test('list-group page has expected h1', async ({ page }) => {
await page.goto('/components/list-group');
expect(await page.textContent('h1')).toBe('List group');
});
test('modal page has expected h1', async ({ page }) => {
await page.goto('/components/modal');
expect(await page.textContent('h1')).toBe('Modal');
});
test('navbar page has expected h1', async ({ page }) => {
await page.goto('/components/navbar');
expect(await page.textContent('h1')).toBe('Navbar');
});
test('pagination page has expected h1', async ({ page }) => {
await page.goto('/components/pagination');
expect(await page.textContent('h1')).toContain('Pagination');
});
test('popover page has expected h1', async ({ page }) => {
await page.goto('/components/popover');
expect(await page.textContent('h1')).toContain('Popover');
});
test('progress page has expected h1', async ({ page }) => {
await page.goto('/components/progress');
expect(await page.textContent('h1')).toBe('Progress bar');
});
test('rating page has expected h1', async ({ page }) => {
await page.goto('/components/rating');
expect(await page.textContent('h1')).toBe('Rating');
});
test('sidebar page has expected h1', async ({ page }) => {
await page.goto('/components/sidebar');
expect(await page.textContent('h1')).toBe('Sidebar');
});
test('skeleton page has expected h1', async ({ page }) => {
await page.goto('/components/skeleton');
expect(await page.textContent('h1')).toBe('Skeleton');
});
test('spinner page has expected h1', async ({ page }) => {
await page.goto('/components/spinner');
expect(await page.textContent('h1')).toBe('Spinner');
});
test('speeddial page has expected h1', async ({ page }) => {
await page.goto('/components/speed-dial');
expect(await page.textContent('h1')).toContain('Speed dial');
});
test('tab page has expected h1', async ({ page }) => {
await page.goto('/components/tabs');
expect(await page.textContent('h1')).toBe('Tabs');
});
test('table page has expected h1', async ({ page }) => {
await page.goto('/components/table');
expect(await page.textContent('h1')).toBe('Table');
});
test('timeline page has expected h1', async ({ page }) => {
await page.goto('/components/timeline');
expect(await page.textContent('h1')).toBe('Timeline');
});
test('toast page has expected h1', async ({ page }) => {
await page.goto('/components/toast');
expect(await page.textContent('h1')).toBe('Toast');
});
test('tooltip page has expected h1', async ({ page }) => {
await page.goto('/components/tooltip');
expect(await page.textContent('h1')).toBe('Tooltip');
});
test('video page has expected h1', async ({ page }) => {
await page.goto('/components/video');
expect(await page.textContent('h1')).toBe('Video');
});
================================================
FILE: e2e/forms.test.ts
================================================
import { expect, test } from '@playwright/test';
test('checkbox page has expected h1', async ({ page }) => {
await page.goto('/forms/checkbox');
expect(await page.textContent('h1')).toBe('Checkbox');
});
test('file input page has expected h1', async ({ page }) => {
await page.goto('/forms/file-input');
expect(await page.textContent('h1')).toBe('File input');
});
test('floating label page has expected h1', async ({ page }) => {
await page.goto('/forms/floating-label');
expect(await page.textContent('h1')).toBe('Floating label');
});
test('input field label page has expected h1', async ({ page }) => {
await page.goto('/forms/input-field');
expect(await page.textContent('h1')).toBe('Input field');
});
test('label label page has expected h1', async ({ page }) => {
await page.goto('/forms/label');
expect(await page.textContent('h1')).toBe('Label');
});
test('radio/helper/radiobutton page has expected h1', async ({ page }) => {
await page.goto('/forms/radio');
expect(await page.textContent('h1')).toBe('Radio, Helper, and RadioButton');
});
test('range page has expected h1', async ({ page }) => {
await page.goto('/forms/range');
expect(await page.textContent('h1')).toBe('Range');
});
test('search input page has expected h1', async ({ page }) => {
await page.goto('/forms/search-input');
expect(await page.textContent('h1')).toBe('Search input');
});
test('select page has expected h1', async ({ page }) => {
await page.goto('/forms/select');
expect(await page.textContent('h1')).toBe('Select');
});
test('toggle page has expected h1', async ({ page }) => {
await page.goto('/forms/toggle');
expect(await page.textContent('h1')).toBe('Toggle');
});
test('textarea page has expected h1', async ({ page }) => {
await page.goto('/forms/textarea');
expect(await page.textContent('h1')).toBe('Textarea');
});
================================================
FILE: e2e/home.test.ts
================================================
import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
console.log(`Running ${test.info().title}`);
await page.goto('/');
});
test('index page has expected h1', async ({ page }) => {
await expect(page.getByRole('heading', { name: 'Svelte 5 Ui Lib', level: 1 })).toBeVisible();
});
test('index page has expected meta title', async ({ page }) => {
await expect(page).toHaveTitle('Svelte 5 Ui Lib');
});
test('index page has expected meta description', async ({ page }) => {
const metaDescription = page.locator('meta[name="description"]');
await expect(metaDescription).toHaveAttribute('content', 'A UI library for Svelte 5 Runes.');
});
test('index page has expected meta keywords', async ({ page }) => {
const metaKeywords = page.locator('meta[name="keywords"]');
await expect(metaKeywords).toHaveAttribute('content', 'svelte, runes, ui, components, library');
});
test('index page has expected meta og', async ({ page }) => {
const metaOgTitle = page.locator('meta[property="og:title"]');
await expect(metaOgTitle).toHaveAttribute('content', 'Svelte 5 Ui Lib');
const metaOgDescription = page.locator('meta[property="og:description"]');
await expect(metaOgDescription).toHaveAttribute('content', 'A UI library for Svelte 5 Runes.');
const metaOgUrl = page.locator('meta[property="og:url"]');
await expect(metaOgUrl).toHaveAttribute('content', 'http://localhost:4173/');
const metaOgImage = page.locator('meta[property="og:image"]');
await expect(metaOgImage).toHaveAttribute(
'content',
'https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib'
);
});
test('index page has expected meta twitter', async ({ page }) => {
const metaTwitterTitle = page.locator('meta[name="twitter:title"]');
await expect(metaTwitterTitle).toHaveAttribute('content', 'Svelte 5 Ui Lib');
const metaTwitterDescription = page.locator('meta[name="twitter:description"]');
await expect(metaTwitterDescription).toHaveAttribute(
'content',
'A UI library for Svelte 5 Runes.'
);
const metaTwitterImage = page.locator('meta[name="twitter:image"]');
await expect(metaTwitterImage).toHaveAttribute(
'content',
'https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib'
);
});
================================================
FILE: e2e/other.test.ts
================================================
import { expect, test } from '@playwright/test';
// plugins
test('chart page has expected h1', async ({ page }) => {
await page.goto('/plugins/chart');
expect(await page.textContent('h1')).toBe('Chart');
});
// Pages
test('about page has expected h1', async ({ page }) => {
await page.goto('/pages/about');
expect(await page.textContent('h1')).toBe('About');
});
================================================
FILE: e2e/typography.test.ts
================================================
import { expect, test } from '@playwright/test';
test('blockquote page has expected h1', async ({ page }) => {
await page.goto('/typography/blockquote');
expect(await page.textContent('h1')).toBe('Blockquote');
});
test('heading/mark page has expected h1', async ({ page }) => {
await page.goto('/typography/heading');
expect(await page.textContent('h1')).toBe('Heading & Mark');
});
test('hr page has expected h1', async ({ page }) => {
await page.goto('/typography/hr');
expect(await page.textContent('h1')).toBe('Horizontal line (HR)');
});
test('image page has expected h1', async ({ page }) => {
await page.goto('/typography/image');
expect(await page.textContent('h1')).toBe('Image');
});
test('layout page has expected h1', async ({ page }) => {
await page.goto('/typography/layout');
expect(await page.textContent('h1')).toBe('Layout');
});
test('link page has expected h1', async ({ page }) => {
await page.goto('/typography/link');
expect(await page.textContent('h1')).toBe('Links');
});
test('list page has expected h1', async ({ page }) => {
await page.goto('/typography/list');
expect(await page.textContent('h1')).toBe('List');
});
test('paragraph page has expected h1', async ({ page }) => {
await page.goto('/typography/paragraph');
expect(await page.textContent('h1')).toBe('Paragraph');
});
test('span page has expected h1', async ({ page }) => {
await page.goto('/typography/span');
expect(await page.textContent('h1')).toBe('Span');
});
================================================
FILE: eslint.config.js
================================================
import prettier from 'eslint-config-prettier';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
export default ts.config(
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs.recommended,
prettier,
...svelte.configs.prettier,
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
ignores: ['eslint.config.js', 'svelte.config.js'],
languageOptions: {
parserOptions: {
projectService: true,
extraFileExtensions: ['.svelte'],
parser: ts.parser,
svelteConfig
}
}
}
);
================================================
FILE: package.json
================================================
{
"name": "svelte-5-ui-lib",
"version": "0.12.6",
"description": "Svelte 5 UI Lib is a UI library built from scratch to leverage Svelte 5's runes system, creating smooth, reactive components.",
"license": "MIT",
"main": "dist/index.js",
"homepage": "https://svelte-5-ui-lib.codewithshin.com/",
"author": {
"name": "Shinichi Okada",
"email": "connect@codewithshin.com",
"url": "https://blog.codewithshin.com"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shinokada/svelte-5-ui-lib.git"
},
"keywords": [
"svelte 5",
"sveltekit 2",
"UI",
"component library",
"tailwindcss",
"flowbite"
],
"scripts": {
"dev": "vite dev",
"build": "vite build && npm run package",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",
"package": "svelte-kit sync && svelte-package && publint",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"format": "prettier --write .",
"lint": "prettier --check . && eslint .",
"test:unit": "vitest",
"test": "npm run test:unit -- --run && npm run test:e2e",
"test:e2e": "playwright test",
"gen:exports": "svelte-lib-helpers exports",
"gen:component-data-from-type": "svelte-lib-helpers component-data-from-type",
"copy:packagejson": "svelte-lib-helpers package",
"rmdoc": "svelte-lib-helpers removeDocs",
"lib-helpers": "pnpm format && pnpm package && pnpm gen:exports && pnpm copy:packagejson",
"generate-file-list": "tsx scripts/generateFileList.ts",
"prebuild": "npm run generate-file-list",
"ch": "npx changeset",
"cv": "npx changeset version",
"cp": "npx changeset publish"
},
"files": [
"dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
],
"sideEffects": [
"**/*.css"
],
"svelte": "./dist/index.js",
"types": "./dist/index.d.ts",
"type": "module",
"peerDependencies": {
"svelte": "^5.0.0"
},
"devDependencies": {
"@changesets/cli": "^2.29.2",
"@eslint/compat": "^1.2.8",
"@eslint/js": "^9.25.0",
"@playwright/test": "^1.52.0",
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/enhanced-img": "^0.4.4",
"@sveltejs/kit": "^2.20.7",
"@sveltejs/package": "^2.3.11",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@svitejs/changesets-changelog-github-compact": "^1.2.0",
"@tailwindcss/vite": "^4.1.4",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/svelte": "^5.2.7",
"eslint": "^9.25.0",
"eslint-config-prettier": "^10.1.2",
"eslint-plugin-svelte": "^3.5.1",
"flowbite-svelte-icons": "^2.1.1",
"globals": "^16.0.0",
"highlight.js": "^11.11.1",
"jsdom": "^26.1.0",
"prettier": "^3.5.3",
"prettier-plugin-svelte": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"publint": "^0.3.12",
"runatics": "^0.1.4",
"runes-meta-tags": "^0.4.2",
"svelte": "^5.28.1",
"svelte-animated-icons": "^0.7.0",
"svelte-check": "^4.1.6",
"svelte-lib-helpers": "^0.4.25",
"svelte-rune-highlight": "^0.5.15",
"tailwindcss": "^4.1.4",
"tsx": "^4.19.3",
"typescript": "^5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.2",
"vite-imagetools": "^7.0.5",
"vitest": "^3.1.1"
},
"pnpm": {
"onlyBuiltDependencies": [
"esbuild"
]
},
"dependencies": {
"@floating-ui/dom": "^1.6.13",
"apexcharts": "^4.5.0",
"clsx": "^2.1.1",
"deepmerge": "^4.3.1",
"tailwind-merge": "^3.2.0",
"tailwind-variants": "^1.0.0"
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"svelte": "./dist/index.js"
},
"./Accordion.svelte": {
"types": "./dist/accordion/Accordion.svelte.d.ts",
"svelte": "./dist/accordion/Accordion.svelte"
},
"./AccordionItem.svelte": {
"types": "./dist/accordion/AccordionItem.svelte.d.ts",
"svelte": "./dist/accordion/AccordionItem.svelte"
},
"./Alert.svelte": {
"types": "./dist/alert/Alert.svelte.d.ts",
"svelte": "./dist/alert/Alert.svelte"
},
"./Avatar.svelte": {
"types": "./dist/avatar/Avatar.svelte.d.ts",
"svelte": "./dist/avatar/Avatar.svelte"
},
"./Badge.svelte": {
"types": "./dist/badge/Badge.svelte.d.ts",
"svelte": "./dist/badge/Badge.svelte"
},
"./Banner.svelte": {
"types": "./dist/banner/Banner.svelte.d.ts",
"svelte": "./dist/banner/Banner.svelte"
},
"./BottomNav.svelte": {
"types": "./dist/bottom-navigation/BottomNav.svelte.d.ts",
"svelte": "./dist/bottom-navigation/BottomNav.svelte"
},
"./BottomNavHeader.svelte": {
"types": "./dist/bottom-navigation/BottomNavHeader.svelte.d.ts",
"svelte": "./dist/bottom-navigation/BottomNavHeader.svelte"
},
"./BottomNavHeaderItem.svelte": {
"types": "./dist/bottom-navigation/BottomNavHeaderItem.svelte.d.ts",
"svelte": "./dist/bottom-navigation/BottomNavHeaderItem.svelte"
},
"./BottomNavItem.svelte": {
"types": "./dist/bottom-navigation/BottomNavItem.svelte.d.ts",
"svelte": "./dist/bottom-navigation/BottomNavItem.svelte"
},
"./Breadcrumb.svelte": {
"types": "./dist/breadcrumb/Breadcrumb.svelte.d.ts",
"svelte": "./dist/breadcrumb/Breadcrumb.svelte"
},
"./BreadcrumbItem.svelte": {
"types": "./dist/breadcrumb/BreadcrumbItem.svelte.d.ts",
"svelte": "./dist/breadcrumb/BreadcrumbItem.svelte"
},
"./ButtonGroup.svelte": {
"types": "./dist/buttongroup/ButtonGroup.svelte.d.ts",
"svelte": "./dist/buttongroup/ButtonGroup.svelte"
},
"./Button.svelte": {
"types": "./dist/buttons/Button.svelte.d.ts",
"svelte": "./dist/buttons/Button.svelte"
},
"./GradientButton.svelte": {
"types": "./dist/buttons/GradientButton.svelte.d.ts",
"svelte": "./dist/buttons/GradientButton.svelte"
},
"./Card.svelte": {
"types": "./dist/cards/Card.svelte.d.ts",
"svelte": "./dist/cards/Card.svelte"
},
"./Chart.svelte": {
"types": "./dist/chart/Chart.svelte.d.ts",
"svelte": "./dist/chart/Chart.svelte"
},
"./Darkmode.svelte": {
"types": "./dist/darkmode/Darkmode.svelte.d.ts",
"svelte": "./dist/darkmode/Darkmode.svelte"
},
"./Android.svelte": {
"types": "./dist/device-mockups/Android.svelte.d.ts",
"svelte": "./dist/device-mockups/Android.svelte"
},
"./DefaultMockup.svelte": {
"types": "./dist/device-mockups/DefaultMockup.svelte.d.ts",
"svelte": "./dist/device-mockups/DefaultMockup.svelte"
},
"./Desktop.svelte": {
"types": "./dist/device-mockups/Desktop.svelte.d.ts",
"svelte": "./dist/device-mockups/Desktop.svelte"
},
"./DeviceMockup.svelte": {
"types": "./dist/device-mockups/DeviceMockup.svelte.d.ts",
"svelte": "./dist/device-mockups/DeviceMockup.svelte"
},
"./Ios.svelte": {
"types": "./dist/device-mockups/Ios.svelte.d.ts",
"svelte": "./dist/device-mockups/Ios.svelte"
},
"./Laptop.svelte": {
"types": "./dist/device-mockups/Laptop.svelte.d.ts",
"svelte": "./dist/device-mockups/Laptop.svelte"
},
"./Smartwatch.svelte": {
"types": "./dist/device-mockups/Smartwatch.svelte.d.ts",
"svelte": "./dist/device-mockups/Smartwatch.svelte"
},
"./Tablet.svelte": {
"types": "./dist/device-mockups/Tablet.svelte.d.ts",
"svelte": "./dist/device-mockups/Tablet.svelte"
},
"./Drawer.svelte": {
"types": "./dist/drawer/Drawer.svelte.d.ts",
"svelte": "./dist/drawer/Drawer.svelte"
},
"./Drawerhead.svelte": {
"types": "./dist/drawer/Drawerhead.svelte.d.ts",
"svelte": "./dist/drawer/Drawerhead.svelte"
},
"./Dropdown.svelte": {
"types": "./dist/dropdown/Dropdown.svelte.d.ts",
"svelte": "./dist/dropdown/Dropdown.svelte"
},
"./DropdownDivider.svelte": {
"types": "./dist/dropdown/DropdownDivider.svelte.d.ts",
"svelte": "./dist/dropdown/DropdownDivider.svelte"
},
"./DropdownFooter.svelte": {
"types": "./dist/dropdown/DropdownFooter.svelte.d.ts",
"svelte": "./dist/dropdown/DropdownFooter.svelte"
},
"./DropdownHeader.svelte": {
"types": "./dist/dropdown/DropdownHeader.svelte.d.ts",
"svelte": "./dist/dropdown/DropdownHeader.svelte"
},
"./DropdownLi.svelte": {
"types": "./dist/dropdown/DropdownLi.svelte.d.ts",
"svelte": "./dist/dropdown/DropdownLi.svelte"
},
"./DropdownUl.svelte": {
"types": "./dist/dropdown/DropdownUl.svelte.d.ts",
"svelte": "./dist/dropdown/DropdownUl.svelte"
},
"./Footer.svelte": {
"types": "./dist/footer/Footer.svelte.d.ts",
"svelte": "./dist/footer/Footer.svelte"
},
"./FooterBrand.svelte": {
"types": "./dist/footer/FooterBrand.svelte.d.ts",
"svelte": "./dist/footer/FooterBrand.svelte"
},
"./FooterCopyright.svelte": {
"types": "./dist/footer/FooterCopyright.svelte.d.ts",
"svelte": "./dist/footer/FooterCopyright.svelte"
},
"./FooterIcon.svelte": {
"types": "./dist/footer/FooterIcon.svelte.d.ts",
"svelte": "./dist/footer/FooterIcon.svelte"
},
"./FooterLi.svelte": {
"types": "./dist/footer/FooterLi.svelte.d.ts",
"svelte": "./dist/footer/FooterLi.svelte"
},
"./FooterUl.svelte": {
"types": "./dist/footer/FooterUl.svelte.d.ts",
"svelte": "./dist/footer/FooterUl.svelte"
},
"./Checkbox.svelte": {
"types": "./dist/forms/checkbox/Checkbox.svelte.d.ts",
"svelte": "./dist/forms/checkbox/Checkbox.svelte"
},
"./CheckboxButton.svelte": {
"types": "./dist/forms/checkbox-button/CheckboxButton.svelte.d.ts",
"svelte": "./dist/forms/checkbox-button/CheckboxButton.svelte"
},
"./Dropzone.svelte": {
"types": "./dist/forms/dropzone/Dropzone.svelte.d.ts",
"svelte": "./dist/forms/dropzone/Dropzone.svelte"
},
"./Fileupload.svelte": {
"types": "./dist/forms/fileupload/Fileupload.svelte.d.ts",
"svelte": "./dist/forms/fileupload/Fileupload.svelte"
},
"./FloatingLabelInput.svelte": {
"types": "./dist/forms/floating-label-input/FloatingLabelInput.svelte.d.ts",
"svelte": "./dist/forms/floating-label-input/FloatingLabelInput.svelte"
},
"./Helper.svelte": {
"types": "./dist/forms/helper/Helper.svelte.d.ts",
"svelte": "./dist/forms/helper/Helper.svelte"
},
"./Input.svelte": {
"types": "./dist/forms/input/Input.svelte.d.ts",
"svelte": "./dist/forms/input/Input.svelte"
},
"./InputAddon.svelte": {
"types": "./dist/forms/input-addon/InputAddon.svelte.d.ts",
"svelte": "./dist/forms/input-addon/InputAddon.svelte"
},
"./Label.svelte": {
"types": "./dist/forms/label/Label.svelte.d.ts",
"svelte": "./dist/forms/label/Label.svelte"
},
"./Radio.svelte": {
"types": "./dist/forms/radio/Radio.svelte.d.ts",
"svelte": "./dist/forms/radio/Radio.svelte"
},
"./RadioButton.svelte": {
"types": "./dist/forms/radio-button/RadioButton.svelte.d.ts",
"svelte": "./dist/forms/radio-button/RadioButton.svelte"
},
"./Range.svelte": {
"types": "./dist/forms/range/Range.svelte.d.ts",
"svelte": "./dist/forms/range/Range.svelte"
},
"./Search.svelte": {
"types": "./dist/forms/search/Search.svelte.d.ts",
"svelte": "./dist/forms/search/Search.svelte"
},
"./Select.svelte": {
"types": "./dist/forms/select/Select.svelte.d.ts",
"svelte": "./dist/forms/select/Select.svelte"
},
"./Textarea.svelte": {
"types": "./dist/forms/textarea/Textarea.svelte.d.ts",
"svelte": "./dist/forms/textarea/Textarea.svelte"
},
"./Toggle.svelte": {
"types": "./dist/forms/toggle/Toggle.svelte.d.ts",
"svelte": "./dist/forms/toggle/Toggle.svelte"
},
"./Gallery.svelte": {
"types": "./dist/gallery/Gallery.svelte.d.ts",
"svelte": "./dist/gallery/Gallery.svelte"
},
"./Indicator.svelte": {
"types": "./dist/indicator/Indicator.svelte.d.ts",
"svelte": "./dist/indicator/Indicator.svelte"
},
"./Kbd.svelte": {
"types": "./dist/kbd/Kbd.svelte.d.ts",
"svelte": "./dist/kbd/Kbd.svelte"
},
"./Listgroup.svelte": {
"types": "./dist/list-group/Listgroup.svelte.d.ts",
"svelte": "./dist/list-group/Listgroup.svelte"
},
"./ListgroupItem.svelte": {
"types": "./dist/list-group/ListgroupItem.svelte.d.ts",
"svelte": "./dist/list-group/ListgroupItem.svelte"
},
"./MegaMenu.svelte": {
"types": "./dist/mega-menu/MegaMenu.svelte.d.ts",
"svelte": "./dist/mega-menu/MegaMenu.svelte"
},
"./Modal.svelte": {
"types": "./dist/modal/Modal.svelte.d.ts",
"svelte": "./dist/modal/Modal.svelte"
},
"./NavBrand.svelte": {
"types": "./dist/nav/NavBrand.svelte.d.ts",
"svelte": "./dist/nav/NavBrand.svelte"
},
"./NavHamburger.svelte": {
"types": "./dist/nav/NavHamburger.svelte.d.ts",
"svelte": "./dist/nav/NavHamburger.svelte"
},
"./NavLi.svelte": {
"types": "./dist/nav/NavLi.svelte.d.ts",
"svelte": "./dist/nav/NavLi.svelte"
},
"./NavUl.svelte": {
"types": "./dist/nav/NavUl.svelte.d.ts",
"svelte": "./dist/nav/NavUl.svelte"
},
"./Navbar.svelte": {
"types": "./dist/nav/Navbar.svelte.d.ts",
"svelte": "./dist/nav/Navbar.svelte"
},
"./Pagination.svelte": {
"types": "./dist/pagination/Pagination.svelte.d.ts",
"svelte": "./dist/pagination/Pagination.svelte"
},
"./PaginationItem.svelte": {
"types": "./dist/pagination/PaginationItem.svelte.d.ts",
"svelte": "./dist/pagination/PaginationItem.svelte"
},
"./Popover.svelte": {
"types": "./dist/popover/Popover.svelte.d.ts",
"svelte": "./dist/popover/Popover.svelte"
},
"./Progressbar.svelte": {
"types": "./dist/progress/Progressbar.svelte.d.ts",
"svelte": "./dist/progress/Progressbar.svelte"
},
"./AdvancedRating.svelte": {
"types": "./dist/rating/AdvancedRating.svelte.d.ts",
"svelte": "./dist/rating/AdvancedRating.svelte"
},
"./CustomIcon.svelte": {
"types": "./dist/rating/CustomIcon.svelte.d.ts",
"svelte": "./dist/rating/CustomIcon.svelte"
},
"./Heart.svelte": {
"types": "./dist/rating/Heart.svelte.d.ts",
"svelte": "./dist/rating/Heart.svelte"
},
"./Rating.svelte": {
"types": "./dist/rating/Rating.svelte.d.ts",
"svelte": "./dist/rating/Rating.svelte"
},
"./RatingComment.svelte": {
"types": "./dist/rating/RatingComment.svelte.d.ts",
"svelte": "./dist/rating/RatingComment.svelte"
},
"./Review.svelte": {
"types": "./dist/rating/Review.svelte.d.ts",
"svelte": "./dist/rating/Review.svelte"
},
"./ScoreRating.svelte": {
"types": "./dist/rating/ScoreRating.svelte.d.ts",
"svelte": "./dist/rating/ScoreRating.svelte"
},
"./Star.svelte": {
"types": "./dist/rating/Star.svelte.d.ts",
"svelte": "./dist/rating/Star.svelte"
},
"./Thumbup.svelte": {
"types": "./dist/rating/Thumbup.svelte.d.ts",
"svelte": "./dist/rating/Thumbup.svelte"
},
"./Sidebar.svelte": {
"types": "./dist/sidebar/Sidebar.svelte.d.ts",
"svelte": "./dist/sidebar/Sidebar.svelte"
},
"./SidebarBrand.svelte": {
"types": "./dist/sidebar/SidebarBrand.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarBrand.svelte"
},
"./SidebarButton.svelte": {
"types": "./dist/sidebar/SidebarButton.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarButton.svelte"
},
"./SidebarCta.svelte": {
"types": "./dist/sidebar/SidebarCta.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarCta.svelte"
},
"./SidebarDropdownWrapper.svelte": {
"types": "./dist/sidebar/SidebarDropdownWrapper.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarDropdownWrapper.svelte"
},
"./SidebarGroup.svelte": {
"types": "./dist/sidebar/SidebarGroup.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarGroup.svelte"
},
"./SidebarItem.svelte": {
"types": "./dist/sidebar/SidebarItem.svelte.d.ts",
"svelte": "./dist/sidebar/SidebarItem.svelte"
},
"./CardPlaceholder.svelte": {
"types": "./dist/skeleton/CardPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/CardPlaceholder.svelte"
},
"./ImagePlaceholder.svelte": {
"types": "./dist/skeleton/ImagePlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/ImagePlaceholder.svelte"
},
"./ListPlaceholder.svelte": {
"types": "./dist/skeleton/ListPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/ListPlaceholder.svelte"
},
"./Skeleton.svelte": {
"types": "./dist/skeleton/Skeleton.svelte.d.ts",
"svelte": "./dist/skeleton/Skeleton.svelte"
},
"./TestimonialPlaceholder.svelte": {
"types": "./dist/skeleton/TestimonialPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/TestimonialPlaceholder.svelte"
},
"./TextPlaceholder.svelte": {
"types": "./dist/skeleton/TextPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/TextPlaceholder.svelte"
},
"./VideoPlaceholder.svelte": {
"types": "./dist/skeleton/VideoPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/VideoPlaceholder.svelte"
},
"./WidgetPlaceholder.svelte": {
"types": "./dist/skeleton/WidgetPlaceholder.svelte.d.ts",
"svelte": "./dist/skeleton/WidgetPlaceholder.svelte"
},
"./Spinner.svelte": {
"types": "./dist/spinner/Spinner.svelte.d.ts",
"svelte": "./dist/spinner/Spinner.svelte"
},
"./Table.svelte": {
"types": "./dist/table/Table.svelte.d.ts",
"svelte": "./dist/table/Table.svelte"
},
"./TableBody.svelte": {
"types": "./dist/table/TableBody.svelte.d.ts",
"svelte": "./dist/table/TableBody.svelte"
},
"./TableBodyCell.svelte": {
"types": "./dist/table/TableBodyCell.svelte.d.ts",
"svelte": "./dist/table/TableBodyCell.svelte"
},
"./TableBodyRow.svelte": {
"types": "./dist/table/TableBodyRow.svelte.d.ts",
"svelte": "./dist/table/TableBodyRow.svelte"
},
"./TableHead.svelte": {
"types": "./dist/table/TableHead.svelte.d.ts",
"svelte": "./dist/table/TableHead.svelte"
},
"./TableHeadCell.svelte": {
"types": "./dist/table/TableHeadCell.svelte.d.ts",
"svelte": "./dist/table/TableHeadCell.svelte"
},
"./TableSearch.svelte": {
"types": "./dist/table/TableSearch.svelte.d.ts",
"svelte": "./dist/table/TableSearch.svelte"
},
"./TabItem.svelte": {
"types": "./dist/tabs/TabItem.svelte.d.ts",
"svelte": "./dist/tabs/TabItem.svelte"
},
"./Tabs.svelte": {
"types": "./dist/tabs/Tabs.svelte.d.ts",
"svelte": "./dist/tabs/Tabs.svelte"
},
"./Theme.svelte": {
"types": "./dist/theme/Theme.svelte.d.ts",
"svelte": "./dist/theme/Theme.svelte"
},
"./Activity.svelte": {
"types": "./dist/timeline/Activity.svelte.d.ts",
"svelte": "./dist/timeline/Activity.svelte"
},
"./ActivityItem.svelte": {
"types": "./dist/timeline/ActivityItem.svelte.d.ts",
"svelte": "./dist/timeline/ActivityItem.svelte"
},
"./Group.svelte": {
"types": "./dist/timeline/Group.svelte.d.ts",
"svelte": "./dist/timeline/Group.svelte"
},
"./GroupItem.svelte": {
"types": "./dist/timeline/GroupItem.svelte.d.ts",
"svelte": "./dist/timeline/GroupItem.svelte"
},
"./Timeline.svelte": {
"types": "./dist/timeline/Timeline.svelte.d.ts",
"svelte": "./dist/timeline/Timeline.svelte"
},
"./TimelineItem.svelte": {
"types": "./dist/timeline/TimelineItem.svelte.d.ts",
"svelte": "./dist/timeline/TimelineItem.svelte"
},
"./Toast.svelte": {
"types": "./dist/toast/Toast.svelte.d.ts",
"svelte": "./dist/toast/Toast.svelte"
},
"./Toolbar.svelte": {
"types": "./dist/toolbar/Toolbar.svelte.d.ts",
"svelte": "./dist/toolbar/Toolbar.svelte"
},
"./ToolbarButton.svelte": {
"types": "./dist/toolbar/ToolbarButton.svelte.d.ts",
"svelte": "./dist/toolbar/ToolbarButton.svelte"
},
"./ToolbarGroup.svelte": {
"types": "./dist/toolbar/ToolbarGroup.svelte.d.ts",
"svelte": "./dist/toolbar/ToolbarGroup.svelte"
},
"./Tooltip.svelte": {
"types": "./dist/tooltip/Tooltip.svelte.d.ts",
"svelte": "./dist/tooltip/Tooltip.svelte"
},
"./A.svelte": {
"types": "./dist/typography/anchor/A.svelte.d.ts",
"svelte": "./dist/typography/anchor/A.svelte"
},
"./Blockquote.svelte": {
"types": "./dist/typography/blockquote/Blockquote.svelte.d.ts",
"svelte": "./dist/typography/blockquote/Blockquote.svelte"
},
"./DescriptionList.svelte": {
"types": "./dist/typography/descriptionlist/DescriptionList.svelte.d.ts",
"svelte": "./dist/typography/descriptionlist/DescriptionList.svelte"
},
"./Heading.svelte": {
"types": "./dist/typography/heading/Heading.svelte.d.ts",
"svelte": "./dist/typography/heading/Heading.svelte"
},
"./Hr.svelte": {
"types": "./dist/typography/hr/Hr.svelte.d.ts",
"svelte": "./dist/typography/hr/Hr.svelte"
},
"./EnhancedImg.svelte": {
"types": "./dist/typography/img/EnhancedImg.svelte.d.ts",
"svelte": "./dist/typography/img/EnhancedImg.svelte"
},
"./Img.svelte": {
"types": "./dist/typography/img/Img.svelte.d.ts",
"svelte": "./dist/typography/img/Img.svelte"
},
"./ImgEnhanced.svelte": {
"types": "./dist/typography/img/ImgEnhanced.svelte.d.ts",
"svelte": "./dist/typography/img/ImgEnhanced.svelte"
},
"./Layout.svelte": {
"types": "./dist/typography/layout/Layout.svelte.d.ts",
"svelte": "./dist/typography/layout/Layout.svelte"
},
"./Li.svelte": {
"types": "./dist/typography/list/Li.svelte.d.ts",
"svelte": "./dist/typography/list/Li.svelte"
},
"./List.svelte": {
"types": "./dist/typography/list/List.svelte.d.ts",
"svelte": "./dist/typography/list/List.svelte"
},
"./Mark.svelte": {
"types": "./dist/typography/mark/Mark.svelte.d.ts",
"svelte": "./dist/typography/mark/Mark.svelte"
},
"./P.svelte": {
"types": "./dist/typography/paragraph/P.svelte.d.ts",
"svelte": "./dist/typography/paragraph/P.svelte"
},
"./Secondary.svelte": {
"types": "./dist/typography/secondary/Secondary.svelte.d.ts",
"svelte": "./dist/typography/secondary/Secondary.svelte"
},
"./Span.svelte": {
"types": "./dist/typography/span/Span.svelte.d.ts",
"svelte": "./dist/typography/span/Span.svelte"
},
"./CloseButton.svelte": {
"types": "./dist/utils/CloseButton.svelte.d.ts",
"svelte": "./dist/utils/CloseButton.svelte"
},
"./Video.svelte": {
"types": "./dist/video/Video.svelte.d.ts",
"svelte": "./dist/video/Video.svelte"
},
"./package.json": "./package.json"
}
}
================================================
FILE: playwright.config.ts
================================================
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'e2e'
});
================================================
FILE: scripts/generateFileList.ts
================================================
// scripts/generateFileList.ts
import fs from 'fs/promises';
import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
async function walkDir(dir: string): Promise<string[]> {
const files = await fs.readdir(dir);
const paths = await Promise.all(
files.map(async (file) => {
const filePath = path.join(dir, file);
const stats = await fs.stat(filePath);
if (stats.isDirectory()) {
return walkDir(filePath);
} else if (path.extname(filePath) === '.svelte') {
return filePath;
}
return [];
})
);
return paths.flat();
}
async function generateFileList() {
const rootDir = path.resolve(__dirname, '../src/lib');
const fileList = await walkDir(rootDir);
const relativePaths = fileList.map((file) =>
path.relative(path.resolve(__dirname, '..'), file).replace(/\\/g, '/')
);
const output = `export const fileList = ${JSON.stringify(relativePaths, null, 2)} as const;`;
await fs.writeFile(path.resolve(__dirname, '../src/generatedFileList.ts'), output);
console.log('File list generated successfully.');
}
generateFileList().catch(console.error);
================================================
FILE: src/app.css
================================================
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@source "../node_modules/flowbite-svelte-icons/dist";
@source "../node_modules/svelte-animated-icons/dist";
@theme {
--z-index-100: 100;
--color-primary-50: ##fff5f2;
--color-primary-100: #fff1ee;
--color-primary-200: #ffe4de;
--color-primary-300: #ffd5cc;
--color-primary-400: #ffbcad;
--color-primary-500: #fe795d;
--color-primary-600: #ef562f;
--color-primary-700: #eb4f27;
--color-primary-800: #cc4522;
--color-primary-900: #a5371b;
--color-secondary-50: #f0f9ff;
--color-secondary-100: #e0f2fe;
--color-secondary-200: #bae6fd;
--color-secondary-300: #7dd3fc;
--color-secondary-400: #38bdf8;
--color-secondary-500: #0ea5e9;
--color-secondary-600: #0284c7;
--color-secondary-700: #0369a1;
--color-secondary-800: #075985;
--color-secondary-900: #0c4a6e;
}
html {
-webkit-text-size-adjust: 100%;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica Neue,
Arial,
Noto Sans,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol,
Noto Color Emoji;
line-height: 1.5;
-moz-tab-size: 4;
tab-size: 4;
}
#mainContent > p {
@apply mb-4 leading-relaxed;
}
code {
@apply text-primary-800 dark:text-primary-500;
}
/* Checkbox/Radio */
[type='checkbox'],
[type='radio'] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #1c64f2;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
[type='checkbox'] {
border-radius: 0px;
}
[type='radio'] {
border-radius: 100%;
}
[type='checkbox']:focus,
[type='radio']:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1c64f2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,
[type='radio']:checked,
.dark [type='checkbox']:checked,
.dark [type='radio']:checked {
border-color: transparent;
background-color: currentColor;
background-size: 0.55em 0.55em;
background-position: center;
background-repeat: no-repeat;
}
[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}
.dark [type='radio']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 1em 1em;
}
[type='checkbox']:indeterminate {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
background-color: currentColor;
border-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 0.55em 0.55em;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[type='checkbox']:indeterminate:hover,
[type='checkbox']:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
/* Range */
input[type='range']::-webkit-slider-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1c64f2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type='range']:disabled::-webkit-slider-thumb {
background: #9ca3af;
}
.dark input[type='range']:disabled::-webkit-slider-thumb {
background: #6b7280;
}
input[type='range']:focus::-webkit-slider-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
--tw-ring-opacity: 1px;
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}
input[type='range']::-moz-range-thumb {
height: 1.25rem;
width: 1.25rem;
background: #1c64f2;
border-radius: 9999px;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type='range']:disabled::-moz-range-thumb {
background: #9ca3af;
}
.dark input[type='range']:disabled::-moz-range-thumb {
background: #6b7280;
}
input[type='range']::-moz-range-progress {
background: #3f83f8;
}
input[type='range']::-ms-fill-lower {
background: #3f83f8;
}
input[type='range'].range-sm::-webkit-slider-thumb {
height: 1rem;
width: 1rem;
}
input[type='range'].range-lg::-webkit-slider-thumb {
height: 1.5rem;
width: 1.5rem;
}
input[type='range'].range-sm::-moz-range-thumb {
height: 1rem;
width: 1rem;
}
input[type='range'].range-lg::-moz-range-thumb {
height: 1.5rem;
width: 1.5rem;
}
/* input file */
[type='file'] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type='file']:focus {
outline: 1px auto inherit;
}
input[type='file']::file-selector-button {
color: white;
background: #1f2937;
border: 0;
font-weight: 500;
font-size: 0.875rem;
cursor: pointer;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
padding-left: 2rem;
padding-right: 1rem;
-webkit-margin-start: -1rem;
margin-inline-start: -1rem;
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
input[type='file']::file-selector-button:hover {
background: #374151;
}
:is([dir='rtl']) input[type='file']::file-selector-button {
padding-right: 2rem;
padding-left: 1rem;
}
.dark input[type='file']::file-selector-button {
color: white;
background: #4b5563;
}
.dark input[type='file']::file-selector-button:hover {
background: #6b7280;
}
/* select */
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
[multiple],
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
}
[type='text']:focus,
[type='email']:focus,
[type='url']:focus,
[type='password']:focus,
[type='number']:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='month']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='time']:focus,
[type='week']:focus,
[multiple]:focus,
textarea:focus,
select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #1c64f2;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #1c64f2;
}
select:not([size]) {
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 0.75em 0.75em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
:is([dir='rtl']) select:not([size]) {
background-position: left 0.75rem center;
padding-right: 0.75rem;
padding-left: 0;
}
.container {
@apply m-4;
}
================================================
FILE: src/app.d.ts
================================================
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
declare const __NAME__: string;
declare const __VERSION__: string;
declare const __GITHUBURL__: string;
declare const __SVELTEVERSION__: string;
declare const __SVELTEKITVERSION__: string;
declare const __VITEVERSION__: string;
declare const __TAILWINDCSSVERSION__: string;
}
export {};
================================================
FILE: src/app.html
================================================
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet"
/>
%sveltekit.head%
</head>
<body
data-sveltekit-preload-data="hover"
class="bg-white text-gray-700 antialiased dark:bg-zinc-950 dark:text-gray-300"
>
<div style="display: contents" class="relative max-h-screen w-full overflow-auto">
%sveltekit.body%
</div>
</body>
</html>
================================================
FILE: src/demo.spec.ts
================================================
import { describe, it, expect } from 'vitest';
describe('sum test', () => {
it('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3);
});
});
================================================
FILE: src/generatedFileList.ts
================================================
export const fileList = [
"src/lib/accordion/Accordion.svelte",
"src/lib/accordion/AccordionItem.svelte",
"src/lib/alert/Alert.svelte",
"src/lib/avatar/Avatar.svelte",
"src/lib/badge/Badge.svelte",
"src/lib/banner/Banner.svelte",
"src/lib/bottom-navigation/BottomNav.svelte",
"src/lib/bottom-navigation/BottomNavHeader.svelte",
"src/lib/bottom-navigation/BottomNavHeaderItem.svelte",
"src/lib/bottom-navigation/BottomNavItem.svelte",
"src/lib/breadcrumb/Breadcrumb.svelte",
"src/lib/breadcrumb/BreadcrumbItem.svelte",
"src/lib/buttongroup/ButtonGroup.svelte",
"src/lib/buttons/Button.svelte",
"src/lib/buttons/GradientButton.svelte",
"src/lib/cards/Card.svelte",
"src/lib/chart/Chart.svelte",
"src/lib/darkmode/Darkmode.svelte",
"src/lib/device-mockups/Android.svelte",
"src/lib/device-mockups/DefaultMockup.svelte",
"src/lib/device-mockups/Desktop.svelte",
"src/lib/device-mockups/DeviceMockup.svelte",
"src/lib/device-mockups/Ios.svelte",
"src/lib/device-mockups/Laptop.svelte",
"src/lib/device-mockups/Smartwatch.svelte",
"src/lib/device-mockups/Tablet.svelte",
"src/lib/drawer/Drawer.svelte",
"src/lib/drawer/Drawerhead.svelte",
"src/lib/dropdown/Dropdown.svelte",
"src/lib/dropdown/DropdownDivider.svelte",
"src/lib/dropdown/DropdownFooter.svelte",
"src/lib/dropdown/DropdownHeader.svelte",
"src/lib/dropdown/DropdownLi.svelte",
"src/lib/dropdown/DropdownUl.svelte",
"src/lib/footer/Footer.svelte",
"src/lib/footer/FooterBrand.svelte",
"src/lib/footer/FooterCopyright.svelte",
"src/lib/footer/FooterIcon.svelte",
"src/lib/footer/FooterLi.svelte",
"src/lib/footer/FooterUl.svelte",
"src/lib/forms/checkbox/Checkbox.svelte",
"src/lib/forms/checkbox-button/CheckboxButton.svelte",
"src/lib/forms/dropzone/Dropzone.svelte",
"src/lib/forms/fileupload/Fileupload.svelte",
"src/lib/forms/floating-label-input/FloatingLabelInput.svelte",
"src/lib/forms/helper/Helper.svelte",
"src/lib/forms/input/Input.svelte",
"src/lib/forms/input-addon/InputAddon.svelte",
"src/lib/forms/label/Label.svelte",
"src/lib/forms/radio/Radio.svelte",
"src/lib/forms/radio-button/RadioButton.svelte",
"src/lib/forms/range/Range.svelte",
"src/lib/forms/search/Search.svelte",
"src/lib/forms/select/Select.svelte",
"src/lib/forms/textarea/Textarea.svelte",
"src/lib/forms/toggle/Toggle.svelte",
"src/lib/gallery/Gallery.svelte",
"src/lib/indicator/Indicator.svelte",
"src/lib/kbd/Kbd.svelte",
"src/lib/list-group/Listgroup.svelte",
"src/lib/list-group/ListgroupItem.svelte",
"src/lib/mega-menu/MegaMenu.svelte",
"src/lib/modal/Modal.svelte",
"src/lib/nav/NavBrand.svelte",
"src/lib/nav/NavHamburger.svelte",
"src/lib/nav/NavLi.svelte",
"src/lib/nav/NavUl.svelte",
"src/lib/nav/Navbar.svelte",
"src/lib/pagination/Pagination.svelte",
"src/lib/pagination/PaginationItem.svelte",
"src/lib/popover/Popover.svelte",
"src/lib/progress/Progressbar.svelte",
"src/lib/rating/AdvancedRating.svelte",
"src/lib/rating/CustomIcon.svelte",
"src/lib/rating/Heart.svelte",
"src/lib/rating/Rating.svelte",
"src/lib/rating/RatingComment.svelte",
"src/lib/rating/Review.svelte",
"src/lib/rating/ScoreRating.svelte",
"src/lib/rating/Star.svelte",
"src/lib/rating/Thumbup.svelte",
"src/lib/sidebar/Sidebar.svelte",
"src/lib/sidebar/SidebarBrand.svelte",
"src/lib/sidebar/SidebarButton.svelte",
"src/lib/sidebar/SidebarCta.svelte",
"src/lib/sidebar/SidebarDropdownWrapper.svelte",
"src/lib/sidebar/SidebarGroup.svelte",
"src/lib/sidebar/SidebarItem.svelte",
"src/lib/skeleton/CardPlaceholder.svelte",
"src/lib/skeleton/ImagePlaceholder.svelte",
"src/lib/skeleton/ListPlaceholder.svelte",
"src/lib/skeleton/Skeleton.svelte",
"src/lib/skeleton/TestimonialPlaceholder.svelte",
"src/lib/skeleton/TextPlaceholder.svelte",
"src/lib/skeleton/VideoPlaceholder.svelte",
"src/lib/skeleton/WidgetPlaceholder.svelte",
"src/lib/spinner/Spinner.svelte",
"src/lib/table/Table.svelte",
"src/lib/table/TableBody.svelte",
"src/lib/table/TableBodyCell.svelte",
"src/lib/table/TableBodyRow.svelte",
"src/lib/table/TableHead.svelte",
"src/lib/table/TableHeadCell.svelte",
"src/lib/table/TableSearch.svelte",
"src/lib/tabs/TabItem.svelte",
"src/lib/tabs/Tabs.svelte",
"src/lib/theme/Theme.svelte",
"src/lib/timeline/Activity.svelte",
"src/lib/timeline/ActivityItem.svelte",
"src/lib/timeline/Group.svelte",
"src/lib/timeline/GroupItem.svelte",
"src/lib/timeline/Timeline.svelte",
"src/lib/timeline/TimelineItem.svelte",
"src/lib/toast/Toast.svelte",
"src/lib/toolbar/Toolbar.svelte",
"src/lib/toolbar/ToolbarButton.svelte",
"src/lib/toolbar/ToolbarGroup.svelte",
"src/lib/tooltip/Tooltip.svelte",
"src/lib/typography/anchor/A.svelte",
"src/lib/typography/blockquote/Blockquote.svelte",
"src/lib/typography/descriptionlist/DescriptionList.svelte",
"src/lib/typography/heading/Heading.svelte",
"src/lib/typography/hr/Hr.svelte",
"src/lib/typography/img/EnhancedImg.svelte",
"src/lib/typography/img/Img.svelte",
"src/lib/typography/img/ImgEnhanced.svelte",
"src/lib/typography/layout/Layout.svelte",
"src/lib/typography/list/Li.svelte",
"src/lib/typography/list/List.svelte",
"src/lib/typography/mark/Mark.svelte",
"src/lib/typography/paragraph/P.svelte",
"src/lib/typography/secondary/Secondary.svelte",
"src/lib/typography/span/Span.svelte",
"src/lib/utils/CloseButton.svelte",
"src/lib/video/Video.svelte"
] as const;
================================================
FILE: src/lib/accordion/Accordion.svelte
================================================
<script lang="ts">
import { setContext } from 'svelte';
import { type AccordionProps as Props, accordion } from './';
let {
children,
flush,
activeClass,
inactiveClass,
isSingle = true,
class: className,
...restProps
}: Props = $props();
const ctx = {
flush,
activeClass,
inactiveClass,
isSingle
};
setContext('ctx', ctx);
const base = $derived(accordion({ flush, className }));
</script>
<div {...restProps} class={base}>
{@render children()}
</div>
================================================
FILE: src/lib/accordion/AccordionItem.svelte
================================================
<script lang="ts">
import { twMerge } from 'tailwind-merge';
import { slide } from 'svelte/transition';
import { getContext } from 'svelte';
import { writable } from 'svelte/store';
import { type AccordionCtxType, type AccordionItemProps as Props, accordionitem } from '.';
import type { ParamsType } from '../types';
let {
children,
header,
arrowup,
arrowdown,
open = $bindable(false),
activeClass,
inactiveClass,
transition = slide,
params,
class: className
}: Props = $props();
const ctx: AccordionCtxType = getContext('ctx') ?? {};
// selected type is writable in AccordionCtxType
if (!ctx.selected) {
ctx.selected = writable();
}
// single selection
const self = {};
const selected = ctx.isSingle ? ctx.selected : writable();
// open && selected.set(self);
if (open) selected.set(self);
selected.subscribe((x) => (open = x === self));
const handleToggle = () => selected.set(open ? {} : self);
const { base, button, content, active, inactive } = accordionitem({ flush: ctx.flush, open });
let buttonClass = $derived(
twMerge(
button(),
open && !ctx.flush && (activeClass || ctx.activeClass || active()),
!open && !ctx.flush && (inactiveClass || ctx.inactiveClass || inactive()),
className
)
);
</script>
<h2 class={base()}>
<button onclick={handleToggle} class={buttonClass} aria-expanded={open}>
{#if header}
{@render header()}
{#if open}
{#if !arrowup}
<svg
class="h-3 w-3 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5 5 1 1 5"
/>
</svg>
{:else}
{@render arrowup()}
{/if}
{:else if !arrowdown}
<svg
class="h-3 w-3 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 10 6"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="m1 1 4 4 4-4"
/>
</svg>
{:else}
{@render arrowdown()}
{/if}
{/if}
</button>
</h2>
{#if open}
<div transition:transition={params as ParamsType}>
<div class={content()}>
{@render children()}
</div>
</div>
{/if}
================================================
FILE: src/lib/accordion/index.ts
================================================
export { default as Accordion } from './Accordion.svelte';
export { default as AccordionItem } from './AccordionItem.svelte';
export { accordion, accordionitem } from './theme';
export type { AccordionCtxType, AccordionProps, AccordionItemProps } from './type';
================================================
FILE: src/lib/accordion/theme.ts
================================================
import { tv } from 'tailwind-variants';
export const accordion = tv({
base: 'w-full text-gray-500 dark:text-gray-400',
variants: {
flush: {
true: '',
false: 'border border-gray-200 dark:border-gray-700 rounded-t-xl'
}
}
});
export const accordionitem = tv({
slots: {
base: 'group',
button:
'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b',
content: 'border-b border-gray-200 dark:border-gray-700',
active:
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800',
inactive: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800'
},
variants: {
flush: {
true: {
button: 'py-5',
content: 'py-5'
},
false: {
button: 'p-5 border-s border-e group-first:border-t',
content: 'p-5 border-s border-e'
}
},
open: {
true: {},
false: {}
}
},
compoundVariants: [
{
flush: true,
open: true,
class: {
button: 'text-gray-900 dark:text-white'
}
},
{
flush: true,
open: false,
class: {
button: 'text-gray-500 dark:text-gray-400'
}
}
],
defaultVariants: {
flush: false,
open: false
}
});
================================================
FILE: src/lib/accordion/type.ts
================================================
import { type Writable } from 'svelte/store';
import type { Snippet } from 'svelte';
import type { ParamsType, TransitionFunc } from '../types';
import type { HTMLAttributes } from 'svelte/elements';
interface AccordionCtxType {
flush: boolean;
activeClass: string | undefined | null;
inactiveClass: string | undefined | null;
selected?: Writable<object>;
classActive?: string;
classInactive?: string;
isSingle?: boolean;
}
interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
flush?: boolean;
isSingle?: boolean;
activeClass?: string;
inactiveClass?: string;
defaultClass?: string;
classActive?: string;
classInactive?: string;
class?: string;
}
interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
header?: Snippet;
arrowup?: Snippet;
arrowdown?: Snippet;
open?: boolean;
activeClass?: string;
inactiveClass?: string;
transition?: TransitionFunc;
params?: ParamsType;
class?: string;
}
export type { AccordionCtxType, AccordionProps, AccordionItemProps };
================================================
FILE: src/lib/alert/Alert.svelte
================================================
<script lang="ts">
import { type AlertProps as Props, alert } from '.';
import { CloseButton } from '$lib';
import { fade } from 'svelte/transition';
import type { ParamsType } from '$lib/types';
let {
children,
icon,
alertStatus = $bindable(true),
closeIcon,
color = 'primary',
rounded = true,
border,
class: className,
dismissable,
transition = fade,
params,
onclick,
...restProps
}: Props = $props();
let divCls = $derived(
alert({
color,
rounded,
border,
icon: !!icon,
dismissable,
className
})
);
// $inspect('transition: ', transition);
</script>
{#if alertStatus}
<div role="alert" {...restProps} transition:transition={params as ParamsType} class={divCls}>
{#if icon}
{@render icon()}
{/if}
{#if icon || dismissable}
<div>
{@render children()}
</div>
{:else}
{@render children()}
{/if}
{#if dismissable}
{#if closeIcon}
<button
type="button"
class="text-primary-500 hover:bg-primary-200 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300 m-0.5 ms-1.5 -me-1.5 rounded p-0.5 whitespace-normal focus:ring-1 focus:outline-none"
aria-label="Remove badge"
onclick={() => {
alertStatus = false;
}}
>
<span class="sr-only">Remove alert</span>
{#if icon}
{@render icon()}
{/if}
</button>
{:else if onclick}
<CloseButton
class="-my-1.5 ms-auto -me-1.5 dark:hover:bg-gray-700"
{color}
ariaLabel="Remove badge"
{onclick}
/>
{:else}
<CloseButton
class="-my-1.5 ms-auto -me-1.5 dark:hover:bg-gray-700"
{color}
ariaLabel="Remove alert"
onclick={() => {
alertStatus = false;
}}
/>
{/if}
{/if}
</div>
{/if}
================================================
FILE: src/lib/alert/index.ts
================================================
// import Alert from "./Alert.svelte";
// import type { alertColor, AlertProps } from "./type";
// import { alert } from "./theme";
// export { type alertColor, type AlertProps, Alert, alert };
export { default as Alert } from './Alert.svelte';
export { alert } from './theme';
export type { alertColor, AlertProps } from './type';
================================================
FILE: src/lib/alert/theme.ts
================================================
import { tv } from 'tailwind-variants';
const alert = tv({
base: 'p-4 gap-3 text-sm',
variants: {
color: {
// primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
primary: 'bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400',
secondary: 'bg-secondary-50 dark:bg-secondary-800 text-secondary-800 dark:text-secondary-400',
gray: 'bg-gray-100 text-gray-500 hover:bg-gray-200 focus:ring-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white',
red: 'bg-red-100 text-red-500 hover:bg-red-200 focus:ring-red-400 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300',
orange:
'bg-orange-100 text-orange-500 hover:bg-orange-200 focus:ring-orange-400 dark:bg-orange-200 dark:text-orange-600 dark:hover:bg-orange-300',
amber:
'bg-amber-100 text-amber-500 hover:bg-amber-200 focus:ring-amber-400 dark:bg-amber-200 dark:text-amber-600 dark:hover:bg-amber-300',
yellow:
'bg-yellow-100 text-yellow-500 hover:bg-yellow-200 focus:ring-yellow-400 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300',
lime: 'bg-lime-100 text-lime-500 hover:bg-lime-200 focus:ring-lime-400 dark:bg-lime-200 dark:text-lime-600 dark:hover:bg-lime-300',
green:
'bg-green-100 text-green-500 hover:bg-green-200 focus:ring-green-400 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300',
emerald:
'bg-emerald-100 text-emerald-500 hover:bg-emerald-200 focus:ring-emerald-400 dark:bg-emerald-200 dark:text-emerald-600 dark:hover:bg-emerald-300',
teal: 'bg-teal-100 text-teal-500 hover:bg-teal-200 focus:ring-teal-400 dark:bg-teal-200 dark:text-teal-600 dark:hover:bg-teal-300',
cyan: 'bg-cyan-100 text-cyan-500 hover:bg-cyan-200 focus:ring-cyan-400 dark:bg-cyan-200 dark:text-cyan-600 dark:hover:bg-cyan-300',
sky: 'bg-sky-100 text-sky-500 hover:bg-sky-200 focus:ring-sky-400 dark:bg-sky-200 dark:text-sky-600 dark:hover:bg-sky-300',
blue: 'bg-blue-100 text-blue-500 hover:bg-blue-200 focus:ring-blue-400 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300',
indigo:
'bg-indigo-100 text-indigo-500 hover:bg-indigo-200 focus:ring-indigo-400 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300',
violet:
'bg-violet-100 text-violet-500 hover:bg-violet-200 focus:ring-violet-400 dark:bg-violet-200 dark:text-violet-600 dark:hover:bg-violet-300',
purple:
'bg-purple-100 text-purple-500 hover:bg-purple-200 focus:ring-purple-400 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300',
fuchsia:
'bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-200 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600 dark:hover:bg-fuchsia-300',
pink: 'bg-pink-100 text-pink-500 hover:bg-pink-200 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300',
rose: 'bg-rose-100 text-rose-500 hover:bg-rose-200 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600 dark:hover:bg-rose-300'
},
rounded: {
true: 'rounded-lg'
},
border: {
true: 'border'
},
icon: {
true: 'flex items-center'
},
dismissable: {
true: 'flex items-center'
}
},
compoundVariants: [
// primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
{
border: true,
color: 'primary',
class: 'border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200'
},
{
border: true,
color: 'secondary',
class:
'border-secondary-500 dark:border-secondary-200 divide-secondary-500 dark:divide-secondary-200'
},
{
border: true,
color: 'gray',
class: 'border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800'
},
{
border: true,
color: 'red',
class: 'border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800'
},
{
border: true,
color: 'orange',
class: 'border-orange-300 dark:border-orange-800 divide-orange-300 dark:divide-orange-800'
},
{
border: true,
color: 'amber',
class: 'border-amber-300 dark:border-amber-800 divide-amber-300 dark:divide-amber-800'
},
{
border: true,
color: 'yellow',
class: 'border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800'
},
{
border: true,
color: 'lime',
class: 'border-lime-300 dark:border-lime-800 divide-lime-300 dark:divide-lime-800'
},
{
border: true,
color: 'green',
class: 'border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800'
},
{
border: true,
color: 'emerald',
class: 'border-emerald-300 dark:border-emerald-800 divide-emerald-300 dark:divide-emerald-800'
},
{
border: true,
color: 'teal',
class: 'border-teal-300 dark:border-teal-800 divide-teal-300 dark:divide-teal-800'
},
{
border: true,
color: 'cyan',
class: 'border-cyan-300 dark:border-cyan-800 divide-cyan-300 dark:divide-cyan-800'
},
{
border: true,
color: 'sky',
class: 'border-sky-300 dark:border-sky-800 divide-sky-300 dark:divide-sky-800'
},
{
border: true,
color: 'blue',
class: 'border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800'
},
{
border: true,
color: 'indigo',
class: 'border-indigo-300 dark:border-indigo-800 divide-indigo-300 dark:divide-indigo-800'
},
// violet, purple, fuchsia, pink, rose
{
border: true,
color: 'violet',
class: 'border-violet-300 dark:border-violet-800 divide-violet-300 dark:divide-violet-800'
},
{
border: true,
color: 'purple',
class: 'border-purple-300 dark:border-purple-800 divide-purple-300 dark:divide-purple-800'
},
{
border: true,
color: 'fuchsia',
class: 'border-fuchsia-300 dark:border-fuchsia-800 divide-fuchsia-300 dark:divide-fuchsia-800'
},
{
border: true,
color: 'pink',
class: 'border-pink-300 dark:border-pink-800 divide-pink-300 dark:divide-pink-800'
},
{
border: true,
color: 'rose',
class: 'border-rose-300 dark:border-rose-800 divide-rose-300 dark:divide-rose-800'
}
],
defaultVariants: {
color: 'primary',
rounded: true
}
});
export { alert };
================================================
FILE: src/lib/alert/type.ts
================================================
import type { Snippet } from 'svelte';
import type { ParamsType, TransitionFunc } from '../types';
import type { HTMLAttributes } from 'svelte/elements';
type alertColor =
| 'primary'
| 'secondary'
| 'gray'
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose';
interface AlertProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
icon?: Snippet;
alertStatus?: boolean;
closeIcon?: boolean;
color?: alertColor;
border?: boolean;
rounded?: boolean;
dismissable?: boolean;
transition?: TransitionFunc;
params?: ParamsType;
onclick?: () => void;
class?: string;
}
export type { alertColor, AlertProps };
================================================
FILE: src/lib/avatar/Avatar.svelte
================================================
<script lang="ts">
import { Indicator } from '$lib';
import { type AvatarProps as Props, avatar } from '.';
let {
children,
src,
href,
target,
cornerStyle = 'circular',
border = false,
stacked = false,
dot,
class: className,
alt,
size = 'md',
onclick,
...restProps
}: Props = $props();
dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
let avatarClass = $derived(
avatar({
cornerStyle,
border,
stacked,
size,
className
})
);
</script>
{#if !src || !!href || children || dot}
<svelte:element
this={href ? 'a' : 'div'}
role={href ? undefined : 'button'}
{onclick}
{href}
{target}
{...restProps}
class={avatarClass}
>
{#if src}
<img {alt} {src} class={cornerStyle === 'circular' ? 'rounded-full' : 'rounded'} />
{:else if children}
{@render children()}
{:else}
<svg
class="h-full w-full {cornerStyle === 'circular' ? 'rounded-full' : 'rounded'}"
fill="currentColor"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
></path>
</svg>
{/if}
{#if dot}
<Indicator border offset={cornerStyle === 'circular' ? true : false} {...dot} />
{/if}
</svelte:element>
{:else}
<img {alt} {src} {...restProps} class={avatarClass} />
{/if}
================================================
FILE: src/lib/avatar/index.ts
================================================
import type { AvatarProps } from './type';
import Avatar from './Avatar.svelte';
import { avatar } from './theme';
export { Avatar, avatar, type AvatarProps };
================================================
FILE: src/lib/avatar/theme.ts
================================================
import { tv } from 'tailwind-variants';
const avatar = tv({
base: 'relative flex items-center justify-center bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300',
variants: {
cornerStyle: {
rounded: 'rounded',
circular: 'rounded-full'
},
border: {
true: 'p-1 ring-2 ring-gray-300 dark:ring-gray-500',
false: ''
},
stacked: {
true: 'border-2 -ms-4 border-white dark:border-gray-800',
false: ''
},
size: {
xs: 'w-6 h-6',
sm: 'w-8 h-8',
md: 'w-10 h-10',
lg: 'w-20 h-20',
xl: 'w-36 h-36'
}
},
defaultVariants: {
cornerStyle: 'circular',
border: false,
stacked: false,
size: 'md'
}
});
export { avatar };
================================================
FILE: src/lib/avatar/type.ts
================================================
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
children?: Snippet;
href?: HTMLAnchorAttributes['href'];
target?: HTMLAnchorAttributes['target'];
src?: string;
cornerStyle?: 'rounded' | 'circular';
stacked?: boolean;
dot?: object | undefined;
alt?: string;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
onclick?: () => void;
border?: boolean;
class?: string;
}
export { type AvatarProps };
================================================
FILE: src/lib/badge/Badge.svelte
================================================
<script lang="ts">
import { type BadgeProps as Props, badge } from './index';
import { CloseButton } from '$lib';
import { fade } from 'svelte/transition';
import type { ParamsType } from '$lib/types';
let {
children,
icon,
badgeStatus = $bindable(true),
color = 'primary',
large = false,
dismissable = false,
class: className,
border,
href,
target,
rounded,
transition = fade,
params,
aClass,
onclick,
...restProps
}: Props = $props();
const { base, hrefClass } = $derived(
badge({ color, size: large ? 'large' : 'small', border, rounded })
);
// $inspect('badgeStatus: ', badgeStatus);
</script>
{#if badgeStatus}
<div {...restProps} transition:transition={params as ParamsType} class={base({ className })}>
{#if href}
<a {href} {target} class={hrefClass({ class: aClass })}>
{@render children()}
</a>
{:else}
{@render children()}
{/if}
{#if dismissable}
{#if icon}
<button
type="button"
class="text-primary-500 hover:bg-primary-200 focus:ring-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-300 m-0.5 ms-1.5 -me-1.5 rounded p-0.5 whitespace-normal focus:ring-1 focus:outline-none"
aria-label="Remove badge"
onclick={() => {
badgeStatus = false;
}}
>
<span class="sr-only">Remove badge</span>
{@render icon()}
</button>
{:else if onclick}
<CloseButton
class="ms-1.5 -me-1.5"
{color}
size={large ? 'sm' : 'xs'}
ariaLabel="Remove badge"
{onclick}
/>
{:else}
<CloseButton
class="ms-1.5 -me-1.5"
{color}
size={large ? 'sm' : 'xs'}
ariaLabel="Remove badge"
onclick={() => {
badgeStatus = false;
}}
/>
{/if}
{/if}
</div>
{/if}
================================================
FILE: src/lib/badge/index.ts
================================================
import type { BadgeProps, BadgeColorType } from './type';
import Badge from './Badge.svelte';
import { badge } from './theme';
export { Badge, badge, type BadgeProps, type BadgeColorType };
================================================
FILE: src/lib/badge/theme.ts
================================================
import { tv } from 'tailwind-variants';
const badge = tv({
slots: {
hrefClass: 'flex align-middle',
base: 'font-medium inline-flex items-center justify-center px-2.5 py-0.5'
},
variants: {
color: {
// primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
primary: {
base: 'bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300'
},
secondary: {
base: 'bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300'
},
gray: { base: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300' },
red: { base: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' },
orange: { base: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300' },
amber: { base: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300' },
yellow: { base: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' },
lime: { base: 'bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-300' },
green: { base: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' },
emerald: {
base: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300'
},
teal: { base: 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-300' },
cyan: { base: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300' },
sky: { base: 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300' },
blue: { base: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' },
indigo: { base: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300' },
violet: { base: 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-300' },
fuchsia: {
base: 'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-900 dark:text-fuchsia-300'
},
purple: { base: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' },
pink: { base: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300' },
rose: { base: 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300' }
},
size: {
small: 'text-xs',
large: 'text-sm'
},
border: {
true: 'border'
},
rounded: {
true: 'rounded-full',
false: 'rounded'
}
},
compoundVariants: [
{
border: true,
color: 'primary',
class:
'bg-primary-100 text-primary-800 dark:bg-primary-700/50 dark:text-primary-400 border-primary-400 dark:border-primary-400'
},
{
border: true,
color: 'secondary',
class:
'bg-secondary-100 text-secondary-800 dark:bg-secondary-700/50 dark:text-secondary-400 border-secondary-400 dark:border-secondary-400'
},
{
border: true,
color: 'gray',
class:
'bg-gray-100 text-gray-800 dark:bg-gray-700/50 dark:text-gray-400 border-gray-400 dark:border-gray-400'
},
{
border: true,
color: 'red',
class:
'bg-red-100 text-red-800 dark:bg-red-700/50 dark:text-red-400 border-red-400 dark:border-red-400'
},
{
border: true,
color: 'orange',
class:
'bg-orange-100 text-orange-800 dark:bg-orange-700/50 dark:text-orange-400 border-orange-400 dark:border-orange-400'
},
{
border: true,
color: 'amber',
class:
'bg-amber-100 text-amber-800 dark:bg-amber-700/50 dark:text-amber-400 border-amber-400 dark:border-amber-400'
},
{
border: true,
color: 'yellow',
class:
'bg-yellow-100 text-yellow-800 dark:bg-yellow-700/50 dark:text-yellow-300 border-yellow-300 dark:border-yellow-300'
},
{
border: true,
color: 'lime',
class:
'bg-lime-100 text-lime-800 dark:bg-lime-700/50 dark:text-lime-400 border-lime-400 dark:border-lime-400'
},
{
border: true,
color: 'green',
class:
'bg-green-100 text-green-800 dark:bg-green-700/50 dark:text-green-400 border-green-400 dark:border-green-400'
},
{
border: true,
color: 'emerald',
class:
'bg-emerald-100 text-emerald-800 dark:bg-emerald-700/50 dark:text-emerald-400 border-emerald-400 dark:border-emerald-400'
},
{
border: true,
color: 'teal',
class:
'bg-teal-100 text-teal-800 dark:bg-teal-700/50 dark:text-teal-400 border-teal-400 dark:border-teal-400'
},
{
border: true,
color: 'cyan',
class:
'bg-cyan-100 text-cyan-800 dark:bg-cyan-700/50 dark:text-cyan-400 border-cyan-400 dark:border-cyan-400'
},
{
border: true,
color: 'sky',
class:
'bg-sky-100 text-sky-800 dark:bg-sky-700/50 dark:text-sky-400 border-sky-400 dark:border-sky-400'
},
{
border: true,
color: 'blue',
class:
'bg-blue-100 text-blue-800 dark:bg-blue-700/50 dark:text-blue-400 border-blue-400 dark:border-blue-400'
},
{
border: true,
color: 'indigo',
class:
'bg-indigo-100 text-indigo-800 dark:bg-indigo-700/50 dark:text-indigo-400 border-indigo-400 dark:border-indigo-400'
},
{
border: true,
color: 'violet',
class:
'bg-violet-100 text-violet-800 dark:bg-violet-700/50 dark:text-violet-400 border-violet-400 dark:border-violet-400'
},
{
border: true,
color: 'purple',
class:
'bg-purple-100 text-purple-800 dark:bg-purple-700/50 dark:text-purple-400 border-purple-400 dark:border-purple-400'
},
{
border: true,
color: 'fuchsia',
class:
'bg-fuchsia-100 text-fuchsia-800 dark:bg-fuchsia-700/50 dark:text-fuchsia-400 border-fuchsia-400 dark:border-fuchsia-400'
},
{
border: true,
color: 'pink',
class:
'bg-pink-100 text-pink-800 dark:bg-pink-700/50 dark:text-pink-400 border-pink-400 dark:border-pink-400'
},
{
border: true,
color: 'rose',
class:
'bg-rose-100 text-rose-800 dark:bg-rose-700/50 dark:text-rose-400 border-rose-400 dark:border-rose-400'
},
{
href: true,
color: 'primary',
class: 'hover:bg-primary-200'
},
{
href: true,
color: 'secondary',
class: 'hover:bg-secondary-200'
},
{
href: true,
color: 'gray',
class: 'hover:bg-gray-200'
},
{
href: true,
color: 'red',
class: 'hover:bg-red-200'
},
{
href: true,
color: 'orange',
class: 'hover:bg-orange-200'
},
{
href: true,
color: 'amber',
class: 'hover:bg-amber-200'
},
{
href: true,
color: 'yellow',
class: 'hover:bg-yellow-200'
},
{
href: true,
color: 'lime',
class: 'hover:bg-lime-200'
},
{
href: true,
color: 'green',
class: 'hover:bg-green-200'
},
{
href: true,
color: 'emerald',
class: 'hover:bg-emerald-200'
},
{
href: true,
color: 'teal',
class: 'hover:bg-teal-200'
},
{
href: true,
color: 'cyan',
class: 'hover:bg-cyan-200'
},
{
href: true,
color: 'sky',
class: 'hover:bg-sky-200'
},
{
href: true,
color: 'blue',
class: 'hover:bg-blue-200'
},
{
href: true,
color: 'indigo',
class: 'hover:bg-indigo-200'
},
{
href: true,
color: 'violet',
class: 'hover:bg-violet-200'
},
{
href: true,
color: 'purple',
class: 'hover:bg-purple-200'
},
{
href: true,
color: 'fuchsia',
class: 'hover:bg-fuchsia-200'
},
{
href: true,
color: 'pink',
class: 'hover:bg-pink-200'
},
{
href: true,
color: 'rose',
class: 'hover:bg-rose-200'
}
],
defaultVariants: {
color: 'primary',
size: 'small',
rounded: false
}
});
export { badge };
================================================
FILE: src/lib/badge/type.ts
================================================
import type { Snippet } from 'svelte';
import type { ParamsType, TransitionFunc } from '../types';
import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
type BadgeColorType =
| 'primary'
| 'secondary'
| 'gray'
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose';
interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
icon?: Snippet;
badgeStatus?: boolean;
color?: BadgeColorType;
large?: boolean;
dismissable?: boolean;
border?: boolean;
href?: HTMLAnchorAttributes['href'];
target?: HTMLAnchorAttributes['target'];
rounded?: boolean;
transition?: TransitionFunc;
params?: ParamsType;
onclick?: () => void;
aClass?: string;
class?: string;
}
export { type BadgeProps, type BadgeColorType };
================================================
FILE: src/lib/banner/Banner.svelte
================================================
<script lang="ts">
import { CloseButton } from '$lib';
import { fade } from 'svelte/transition';
import { type BannerProps as Props, banner } from './index';
import type { ParamsType } from '../types';
let {
children,
header,
bannerStatus = $bindable(true),
position = 'sticky',
dismissable = true,
color = 'gray',
bannerType = 'default',
class: className,
innerClass,
transition = fade,
params,
...restProps
}: Props = $props();
const { base, insideDiv } = banner({
bannerType,
color
});
let bannerClass = $derived(base({ position, bannerType, color, className }));
let innerCls = $derived(insideDiv({ bannerType, class: innerClass }));
</script>
{#if bannerStatus}
<div
tabindex="-1"
class={bannerClass}
{...restProps}
transition:transition={params as ParamsType}
>
{#if header}
{@render header()}
{/if}
<div class={innerCls}>
{@render children()}
</div>
{#if dismissable}
<div class="flex items-center">
<CloseButton
class="-mx-1.5 -my-1.5"
{color}
ariaLabel="Remove badge"
onclick={() => {
bannerStatus = false;
}}
/>
</div>
{/if}
</div>
{/if}
================================================
FILE: src/lib/banner/index.ts
================================================
import type { BannerProps } from './type';
import Banner from './Banner.svelte';
import { banner } from './theme';
export { Banner, banner, type BannerProps };
================================================
FILE: src/lib/banner/theme.ts
================================================
import { tv } from 'tailwind-variants';
const banner = tv({
slots: {
base: 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600',
insideDiv: 'flex items-center'
},
variants: {
position: {
// "static" | "fixed" | "absolute" | "relative" | "sticky"
static: { base: 'static' },
fixed: { base: 'fixed' },
absolute: { base: 'absolute' },
relative: { base: 'relative' },
sticky: { base: 'sticky' }
},
bannerType: {
// "default" | "bottom" | "cta" | "signup" | "info"
default: {
base: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
insideDiv: 'mx-auto'
},
bottom: {
base: 'bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50',
insideDiv: 'mx-auto'
},
cta: {
base: 'flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-sm lg:max-w-7xl start-1/2 top-6',
insideDiv: 'flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0'
},
signup: {
base: 'top-0 start-0 w-full border-b border-gray-200 bg-gray-50',
insideDiv: 'flex-shrink-0 w-full mx-auto sm:w-auto'
},
info: {
base: 'top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50',
insideDiv: 'flex-shrink-0'
}
},
color: {
// 'primary' secondary, | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
primary: { base: 'bg-primary-50 dark:bg-primary-900' },
secondary: { base: 'bg-secondary-50 dark:bg-secondary-900' },
gray: { base: 'bg-gray-50 dark:bg-gray-700' },
red: { base: 'bg-red-50 dark:bg-red-900' },
orange: { base: 'bg-orange-50 dark:bg-orange-900' },
amber: { base: 'bg-amber-50 dark:bg-amber-900' },
yellow: { base: 'bg-yellow-50 dark:bg-yellow-900' },
lime: { base: 'bg-lime-50 dark:bg-lime-900' },
green: { base: 'bg-green-50 dark:bg-green-900' },
emerald: { base: 'bg-emerald-50 dark:bg-emerald-900' },
teal: { base: 'bg-teal-50 dark:bg-teal-900' },
cyan: { base: 'bg-cyan-50 dark:bg-cyan-900' },
sky: { base: 'bg-sky-50 dark:bg-sky-900' },
blue: { base: 'bg-blue-50 dark:bg-blue-900' },
indigo: { base: 'bg-indigo-50 dark:bg-indigo-900' },
violet: { base: 'bg-violet-50 dark:bg-violet-900' },
purple: { base: 'bg-purple-50 dark:bg-purple-900' },
fuchsia: { base: 'bg-fuchsia-50 dark:bg-fuchsia-900' },
pink: { base: 'bg-pink-50 dark:bg-pink-900' },
rose: { base: 'bg-rose-50 dark:bg-rose-900' }
}
},
defaultVariants: {
position: 'sticky',
bannerType: 'default'
}
});
export { banner };
================================================
FILE: src/lib/banner/type.ts
================================================
import type { Snippet } from 'svelte';
import type { TransitionFunc } from '../types';
import type { HTMLAttributes } from 'svelte/elements';
type ColorVariants =
| 'primary'
| 'secondary'
| 'gray'
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose';
type TypeVariants = 'default' | 'bottom' | 'cta' | 'signup' | 'info';
type PositionVariants = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
interface BannerProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
header?: Snippet;
bannerStatus?: boolean;
position?: PositionVariants;
dismissable?: boolean;
color?: ColorVariants;
bannerType?: TypeVariants;
divClass?: string;
innerClass?: string;
transition?: TransitionFunc;
params?: object;
class?: string;
}
export { type BannerProps };
================================================
FILE: src/lib/bottom-navigation/BottomNav.svelte
================================================
<script lang="ts">
import { setContext } from 'svelte';
import { twMerge } from 'tailwind-merge';
import { writable } from 'svelte/store';
import { type BottomNavProps as Props, type BottomNavContextType, bottomNav } from './index';
let {
children,
header,
position = 'fixed',
navType = 'default',
outerClass,
innerClass,
activeClass,
activeUrl = '',
...restProps
}: Props = $props();
const activeCls = twMerge(
'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900',
activeClass
);
const activeUrlStore = writable('');
setContext('activeUrl', activeUrlStore);
setContext('navType', navType);
setContext<BottomNavContextType>('bottomNavType', { activeClass: activeCls });
// $inspect('position: ', position);
const { outer, inner } = bottomNav({ position, navType });
const outerCls = $derived(outer({ class: outerClass }));
const innerCls = $derived(inner({ class: innerClass }));
$effect(() => {
activeUrlStore.set(activeUrl);
});
</script>
<div {...restProps} class={outerCls}>
{#if header}
{@render header()}
{/if}
<div class={innerCls}>
{@render children()}
</div>
</div>
================================================
FILE: src/lib/bottom-navigation/BottomNavHeader.svelte
================================================
<script lang="ts">
import { type BottomNavHeaderProps as Props, bottomnavheader } from '.';
let { children, outerClass, innerClass, ...restProps }: Props = $props();
const { innerDiv, outerDiv } = $derived(bottomnavheader());
</script>
<div {...restProps} class={outerDiv({ class: outerClass })}>
<div class={innerDiv({ class: innerClass })} role="group">
{@render children()}
</div>
</div>
================================================
FILE: src/lib/bottom-navigation/BottomNavHeaderItem.svelte
================================================
<script lang="ts">
import { type BottomNavHeaderItemProps as Props, bottomnavheaderitem } from '.';
let { itemName, active, class: className, ...restProps }: Props = $props();
let base = $derived(bottomnavheaderitem({ active, className }));
</script>
<button {...restProps} class={base}>
{itemName}
</button>
================================================
FILE: src/lib/bottom-navigation/BottomNavItem.svelte
================================================
<script lang="ts">
import { getContext } from 'svelte';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
import {
type BottomNavItemProps as Props,
type BottomNavContextType,
type BottomNavVariantType,
bottomNavItem
} from './index';
import { twMerge } from 'tailwind-merge';
let {
children,
btnName,
appBtnPosition = 'middle',
target,
activeClass,
href = '',
btnClass,
spanClass,
...restProps
}: Props = $props();
const navType: BottomNavVariantType = getContext('navType');
const context = getContext<BottomNavContextType>('bottomNavType') ?? {};
let active: boolean = $state(false);
const activeUrlStore = getContext('activeUrl') as {
subscribe: (callback: (value: string) => void) => void;
};
let navUrl = $state('');
activeUrlStore.subscribe((value) => {
navUrl = value;
});
const { base, span } = bottomNavItem({ navType, appBtnPosition });
$effect(() => {
active = navUrl ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
});
function getCommonClass() {
return twMerge(base({ class: btnClass }), active && (activeClass ?? context.activeClass));
}
function getSpanClass() {
return twMerge(span({ class: spanClass }), active && (activeClass ?? context.activeClass));
}
/* eslint-disable @typescript-eslint/no-explicit-any */
const commonProps: Record<string, any> = $derived({
'aria-label': btnName,
class: getCommonClass(),
...restProps
});
const anchorProps: HTMLAnchorAttributes = $derived({
...commonProps,
href,
target
});
const buttonProps: HTMLButtonAttributes = $derived({
...commonProps,
type: 'button' as const
});
$effect(() => {
// console.log('commonProps: ', commonProps);
});
</script>
{#if href}
<a {...anchorProps}>
{@render children()}
<span class={getSpanClass()}>{btnName}</span>
</a>
{:else}
<button {...buttonProps}>
{@render children()}
<span class={getSpanClass()}>{btnName}</span>
</button>
{/if}
================================================
FILE: src/lib/bottom-navigation/index.ts
================================================
import type {
BottomNavProps,
BottomNavItemProps,
BottomNavContextType,
BottomNavVariantType,
BottomNavHeaderProps,
BottomNavHeaderItemProps
} from './type';
import BottomNav from './BottomNav.svelte';
import BottomNavItem from './BottomNavItem.svelte';
import BottomNavHeaderItem from './BottomNavHeaderItem.svelte';
import BottomNavHeader from './BottomNavHeader.svelte';
import { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from './theme';
export {
BottomNav,
BottomNavItem,
bottomNav,
bottomNavItem,
BottomNavHeader,
bottomnavheader,
BottomNavHeaderItem,
bottomnavheaderitem,
type BottomNavProps,
type BottomNavItemProps,
type BottomNavContextType,
type BottomNavVariantType,
type BottomNavHeaderProps,
type BottomNavHeaderItemProps
};
================================================
FILE: src/lib/bottom-navigation/theme.ts
================================================
import { tv } from 'tailwind-variants';
export const bottomNav = tv({
slots: {
outer: 'w-full z-30 border-gray-200 dark:bg-gray-700 dark:border-gray-600',
inner: 'grid h-full max-w-lg mx-auto'
},
variants: {
position: {
static: { outer: 'static' },
fixed: { outer: 'fixed' },
absolute: { outer: 'absolute' },
relative: { outer: 'relative' },
sticky: { outer: 'sticky' }
},
navType: {
default: { outer: 'bottom-0 start-0 h-16 bg-white border-t' },
border: { outer: 'bottom-0 start-0 h-16 bg-white border-t' },
application: {
outer:
'h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2'
},
pagination: {
outer: 'bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2'
},
group: {
outer: 'bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2'
},
card: { outer: 'bottom-0 start-0 h-16 bg-white border-t' },
meeting: {
outer: 'bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
inner: 'flex items-center justify-center mx-auto'
},
video: {
outer: 'bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3',
inner: 'flex items-center w-full'
}
}
},
defaultVariants: {
position: 'fixed',
navType: 'default'
}
});
export const bottomNavItem = tv({
slots: {
base: 'inline-flex flex-col items-center justify-center',
span: 'text-sm'
},
variants: {
navType: {
default: {
base: 'px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
span: 'text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500'
},
border: {
base: 'px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600',
span: 'text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500'
},
application: {
base: '',
span: 'sr-only'
},
pagination: {
base: 'px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
span: 'sr-only'
},
group: {
base: 'p-4 hover:bg-gray-50 dark:hover:bg-gray-800 group',
span: 'sr-only'
},
card: {
base: 'px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group',
span: 'text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500'
},
meeting: {
base: '',
span: ''
},
video: {
base: '',
span: ''
}
},
appBtnPosition: {
left: {
base: 'px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
},
middle: { base: 'px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group' },
right: {
base: 'px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group'
}
}
},
defaultVariants: {
navType: 'default',
appBtnPosition: 'middle',
active: false
}
});
export const bottomnavheader = tv({
slots: {
innerDiv:
'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600',
outerDiv: 'w-full'
}
});
export const bottomnavheaderitem = tv({
base: 'px-5 py-1.5 text-xs font-medium rounded-lg',
variants: {
active: {
true: 'text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900',
false: 'text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700'
}
}
});
================================================
FILE: src/lib/bottom-navigation/type.ts
================================================
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
type BottomNavVariantType =
| 'border'
| 'application'
| 'group'
| 'default'
| 'pagination'
| 'card'
| 'meeting'
| 'video'
| undefined;
type PositionType = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' | undefined;
type BottomNavContextType = {
activeClass: string | undefined | null;
};
type AppBtnPositionType = 'middle' | 'left' | 'right' | undefined;
interface BottomNavProps extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
header?: Snippet;
activeUrl?: string;
position?: PositionType;
navType?: BottomNavVariantType;
outerClass?: string;
innerClass?: string;
activeClass?: string;
}
interface BaseBottomNavItemProps {
children: Snippet;
btnName?: string;
appBtnPosition?: AppBtnPositionType;
target?: string;
activeClass?: string;
btnClass?: string;
spanClass?: string;
}
type BottomNavItemProps = BaseBottomNavItemProps &
(({ href: string } & HTMLAnchorAttributes) | ({ href?: never } & HTMLButtonAttributes));
interface BottomNavHeaderProps {
children: Snippet;
outerClass?: string;
innerClass?: string;
}
interface BottomNavHeaderItemProps extends HTMLButtonAttributes {
itemName: string;
active?: boolean;
class?: string;
}
export {
type BottomNavProps,
type BottomNavItemProps,
type BottomNavContextType,
type BottomNavVariantType,
type BottomNavHeaderProps,
type BottomNavHeaderItemProps
};
================================================
FILE: src/lib/breadcrumb/Breadcrumb.svelte
================================================
<script lang="ts">
import { getContext } from 'svelte';
import { type BreadcrumbProps as Props, breadcrumb } from './index';
let {
children,
solid = false,
navClass,
olClass,
ariaLabel = 'Breadcrumb',
...restProps
}: Props = $props();
// Get merged theme from context
const context = getContext<Record<string, any>>('themeConfig');
// Use context theme if available, otherwise fallback to default
const usedBreadcrumb = context?.breadcrumb || breadcrumb;
const { nav, list } = usedBreadcrumb({ solid });
let classNav = $derived(nav({ class: navClass }));
let classList = $derived(list({ class: olClass }));
</script>
<nav aria-label={ariaLabel} {...restProps} class={classNav}>
<ol class={classList}>
{@render children()}
</ol>
</nav>
================================================
FILE: src/lib/breadcrumb/BreadcrumbItem.svelte
================================================
<script lang="ts">
import { type BreadcrumbItemProps as Props, breadcrumb } from './index';
import { twMerge } from 'tailwind-merge';
let {
children,
icon,
home = false,
href,
linkClass,
spanClass,
homeClass,
class: className,
...restProps
}: Props = $props();
const { item, icon: breacrumbIcon } = breadcrumb({
home,
hasHref: !!href,
class: className
});
</script>
<li {...restProps} class={item()}>
{#if home}
<a class={item({ home: true, class: homeClass })} {href}>
{#if icon}
{@render icon()}
{:else}
<svg
class="me-2 h-4 w-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
/>
</svg>
{/if}
{@render children()}
</a>
{:else}
{#if icon}
{@render icon()}
{:else}
<svg
class={breacrumbIcon()}
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
{/if}
{#if href}
<a class={twMerge(item({ home: false, hasHref: true }), linkClass)} {href}>
{@render children()}
</a>
{:else}
<span class={twMerge(item({ home: false, hasHref: false }), spanClass)}>
{@render children()}
</span>
{/if}
{/if}
</li>
================================================
FILE: src/lib/breadcrumb/index.ts
================================================
import type { BreadcrumbProps, BreadcrumbItemProps } from './type';
import Breadcrumb from './Breadcrumb.svelte';
import BreadcrumbItem from './BreadcrumbItem.svelte';
import { breadcrumb } from './theme';
export { Breadcrumb, BreadcrumbItem, breadcrumb, type BreadcrumbProps, type BreadcrumbItemProps };
================================================
FILE: src/lib/breadcrumb/theme.ts
================================================
import { tv } from 'tailwind-variants';
export const breadcrumb = tv({
slots: {
nav: 'flex',
list: 'inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse',
item: 'inline-flex items-center',
icon: 'h-6 w-6 text-gray-400 rtl:-scale-x-100'
},
variants: {
solid: {
true: {
nav: 'px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
},
false: ''
},
home: {
true: '',
false: ''
},
hasHref: {
true: '',
false: ''
}
},
compoundVariants: [
{
home: true,
class: {
item: 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
icon: 'me-2 h-4 w-4'
}
},
{
home: false,
hasHref: true,
class: {
item: 'ms-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400 dark:hover:text-white'
}
},
{
home: false,
hasHref: false,
class: {
item: 'ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400'
}
}
],
defaultVariants: {
solid: false
}
});
================================================
FILE: src/lib/breadcrumb/type.ts
================================================
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { HTMLLiAttributes } from 'svelte/elements';
interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
children: Snippet;
solid?: boolean;
navClass?: string;
olClass?: string;
ariaLabel?: string;
class?: string;
}
interface BreadcrumbItemProps extends HTMLLiAttributes {
children: Snippet;
icon?: Snippet;
home?: boolean;
href?: string;
linkClass?: string;
spanClass?: string;
homeClass?: string;
class?: string;
}
export { type BreadcrumbProps, type BreadcrumbItemProps };
================================================
FILE: src/lib/buttongroup/ButtonGroup.svelte
================================================
<script lang="ts">
import { setContext } from 'svelte';
import { type ButtonGroupProps as Props, buttonGroup } from './index';
let { children, size = 'md', class: className, ...restProps }: Props = $props();
let groupClass = $derived(buttonGroup({ size, className }));
setContext('group', size);
</script>
<div {...restProps} class={groupClass} role="group">
{@render children()}
</div>
================================================
FILE: src/lib/buttongroup/index.ts
================================================
import type { ButtonGroupProps } from './type';
import ButtonGroup from './ButtonGroup.svelte';
import { buttonGroup } from './theme';
export { ButtonGroup, buttonGroup, type ButtonGroupProps };
================================================
FILE: src/lib/buttongroup/theme.ts
================================================
import { tv } from 'tailwind-variants';
const buttonGroup = tv({
base: 'inline-flex rounded-lg shadow-sm',
variants: {
size: {
sm: 'scale-90',
md: 'scale-100',
lg: 'scale-110'
}
},
defaultVariants: {
size: 'md'
}
});
export { buttonGroup };
================================================
FILE: src/lib/buttongroup/type.ts
================================================
import type { Snippet } from 'svelte';
interface ButtonGroupProps {
children: Snippet;
size?: SizeType;
class?: string;
}
type SizeType = 'sm' | 'md' | 'lg' | undefined;
export { type ButtonGroupProps };
================================================
FILE: src/lib/buttons/Button.svelte
================================================
<script lang="ts">
import { getContext } from 'svelte';
import type { SizeType } from '$lib/types';
import { type ButtonProps as Props, button } from '.';
const group: SizeType = getContext('group');
let {
children,
pill = false,
outline = false,
size = group ? 'sm' : 'md',
href,
type = 'button',
color = group ? (outline ? 'dark' : 'alternative') : 'primary',
shadow = false,
tag = 'button',
disabled,
class: className,
...restProps
}: Props = $props();
const base = $derived(
button({ color, size, disabled, pill, group: !!group, outline, shadow, className })
);
</script>
{#if href}
<a {href} {...restProps} class={base} role="button">
{@render children()}
</a>
{:else if tag === 'button'}
<button {type} {...restProps} class={base} {disabled}>
{@render children()}
</button>
{:else}
<svelte:element this={tag} {...restProps} class={base}>
{@render children()}
</svelte:element>
{/if}
================================================
FILE: src/lib/buttons/GradientButton.svelte
================================================
<script lang="ts">
import Button from './Button.svelte';
import { getContext } from 'svelte';
import { type GradientButtonProps as Props, gradientButton } from '.';
import type { SizeType } from '$lib/types';
const group: SizeType = getContext('group');
let {
children,
outline,
pill,
color = 'blue',
shadow,
class: className,
href,
disabled,
size,
...restProps
}: Props = $props();
const { base, outlineWrapper } = $derived(
gradientButton({ color, outline, pill, shadow, disabled, group: !!group })
);
</script>
{#if outline}
<div class={base({ className })}>
<Button {...restProps} class={outlineWrapper()} {disabled} {href} {size}>
{@render children()}
</Button>
</div>
{:else}
<Button {...restProps} class={base({ className })} {disabled} {href} {size}>
{@render children()}
</Button>
{/if}
================================================
FILE: src/lib/buttons/index.ts
================================================
import type { ButtonProps, GradientButtonProps } from './type';
import Button from './Button.svelte';
import GradientButton from './GradientButton.svelte';
import { button, gradientButton } from './theme';
export {
Button,
GradientButton,
gradientButton,
button,
type ButtonProps,
type GradientButtonProps
};
================================================
FILE: src/lib/buttons/theme.ts
================================================
import { tv } from 'tailwind-variants';
export const button = tv({
base: 'text-center font-medium inline-flex items-center justify-center',
variants: {
color: {
// "primary" | "dark" | "alternative" | "light" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
primary:
'text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800',
dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 focus-within:ring-gray-300 dark:focus-within:ring-gray-700',
alternative:
'text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 hover:text-primary-700 focus-within:text-primary-700 dark:focus-within:text-white dark:hover:text-white focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
light:
'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus-within:ring-gray-200 dark:focus-within:ring-gray-700',
secondary:
'text-white bg-secondary-700 hover:bg-secondary-800 dark:bg-secondary-600 dark:hover:bg-secondary-700 focus-within:ring-secondary-300 dark:focus-within:ring-secondary-800',
gray: 'text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus-within:ring-gray-300 dark:focus-within:ring-gray-800',
red: 'text-white bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus-within:ring-red-300 dark:focus-within:ring-red-900',
orange:
'text-white bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 focus-within:ring-orange-300 dark:focus-within:ring-orange-900',
amber:
'text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 focus-within:ring-amber-300 dark:focus-within:ring-amber-900',
yellow:
'text-white bg-yellow-400 hover:bg-yellow-500 focus-within:ring-yellow-300 dark:focus-within:ring-yellow-900',
lime: 'text-white bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 focus-within:ring-lime-300 dark:focus-within:ring-lime-800',
green:
'text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus-within:ring-green-300 dark:focus-within:ring-green-800',
emerald:
'text-white bg-emerald-700 hover:bg-emerald-800 dark:bg-emerald-600 dark:hover:bg-emerald-700 focus-within:ring-emerald-300 dark:focus-within:ring-emerald-800',
teal: 'text-white bg-teal-700 hover:bg-teal-800 dark:bg-teal-600 dark:hover:bg-teal-700 focus-within:ring-teal-300 dark:focus-within:ring-teal-800',
cyan: 'text-white bg-cyan-700 hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700 focus-within:ring-cyan-300 dark:focus-within:ring-cyan-800',
sky: 'text-white bg-sky-700 hover:bg-sky-800 dark:bg-sky-600 dark:hover:bg-sky-700 focus-within:ring-sky-300 dark:focus-within:ring-sky-800',
blue: 'text-white bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus-within:ring-blue-300 dark:focus-within:ring-blue-800',
indigo:
'text-white bg-indigo-700 hover:bg-indigo-800 dark:bg-indigo-600 dark:hover:bg-indigo-700 focus-within:ring-indigo-300 dark:focus-within:ring-indigo-800',
violet:
'text-white bg-violet-700 hover:bg-violet-800 dark:bg-violet-600 dark:hover:bg-violet-700 focus-within:ring-violet-300 dark:focus-within:ring-violet-800',
purple:
'text-white bg-purple-700 hover:bg-purple-800 dark:bg-purple-600 dark:hover:bg-purple-700',
fuchsia:
'text-white bg-fuchsia-700 hover:bg-fuchsia-800 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700',
pink: 'text-white bg-pink-700 hover:bg-pink-800 dark:bg-pink-600 dark:hover:bg-pink-700',
rose: 'text-white bg-rose-700 hover:bg-rose-800 dark:bg-rose-600 dark:hover:bg-rose-700'
},
size: {
xs: 'px-3 py-2 text-xs',
sm: 'px-4 py-2 text-sm',
md: 'px-5 py-2.5 text-sm',
lg: 'px-5 py-3 text-base',
xl: 'px-6 py-3.5 text-base'
},
group: {
true: 'focus-within:ring-2 focus-within:z-10',
false: 'focus-within:ring-4 focus-within:outline-none'
},
outline: {
true: 'border border-gray-300 dark:border-gray-400'
},
shadow: {
true: 'shadow-lg'
},
disabled: {
true: 'cursor-not-allowed opacity-50'
},
pill: {
true: 'rounded-full'
},
checked: {
true: '',
false: ''
}
},
compoundVariants: [
// {
// outline: true,
// class: 'border dark:border-gray-900'
// },
// dark, alternative, light
// primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
{
shadow: true,
color: 'dark',
class: 'shadow-gray-500/50 dark:shadow-gray-800/80'
},
{
shadow: true,
color: 'alternative',
class: 'shadow-gray-500/50 dark:shadow-gray-800/80'
},
{
shadow: true,
color: 'light',
class: 'shadow-gray-500/50 dark:shadow-gray-800/80'
},
{
shadow: true,
color: 'primary',
class: 'shadow-primary-500/50 dark:shadow-primary-800/80'
},
{
shadow: true,
color: 'secondary',
class: 'shadow-secondary-500/50 dark:shadow-secondary-800/80'
},
{
shadow: true,
color: 'gray',
class: 'shadow-gray-500/50 dark:shadow-gray-800/80'
},
{
shadow: true,
color: 'red',
class: 'shadow-red-500/50 dark:shadow-red-800/80'
},
{
shadow: true,
color: 'orange',
class: 'shadow-orange-500/50 dark:shadow-orange-800/80'
},
{
shadow: true,
color: 'amber',
class: 'shadow-amber-500/50 dark:shadow-amber-800/80'
},
{
shadow: true,
color: 'yellow',
class: 'shadow-yellow-500/50 dark:shadow-yellow-800/80'
},
{
shadow: true,
color: 'lime',
class: 'shadow-lime-500/50 dark:shadow-lime-800/80'
},
{
shadow: true,
color: 'green',
class: 'shadow-green-500/50 dark:shadow-green-800/80'
},
{
shadow: true,
color: 'emerald',
class: 'shadow-emerald-500/50 dark:shadow-emerald-800/80'
},
{
shadow: true,
color: 'teal',
class: 'shadow-teal-500/50 dark:shadow-teal-800/80'
},
{
shadow: true,
color: 'cyan',
class: 'shadow-cyan-500/50 dark:shadow-cyan-800/80'
},
{
shadow: true,
color: 'sky',
class: 'shadow-sky-500/50 dark:shadow-sky-800/80'
},
{
shadow: true,
color: 'blue',
class: 'shadow-blue-500/50 dark:shadow-blue-800/80'
},
{
shadow: true,
color: 'indigo',
class: 'shadow-indigo-500/50 dark:shadow-indigo-800/80'
},
{
shadow: true,
color: 'violet',
class: 'shadow-violet-500/50 dark:shadow-violet-800/80'
},
{
shadow: true,
color: 'purple',
class: 'shadow-purple-500/50 dark:shadow-purple-800/80'
},
{
shadow: true,
color: 'fuchsia',
class: 'shadow-fuchsia-500/50 dark:shadow-fuchsia-800/80'
},
{
shadow: true,
color: 'pink',
class: 'shadow-pink-500/50 dark:shadow-pink-800/80'
},
{
shadow: true,
color: 'rose',
class: 'shadow-rose-500/50 dark:shadow-rose-800/80'
},
{
color: 'alternative',
group: true,
class:
'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
},
{
color: 'alternative',
group: true,
class: 'dark:bg-transparent dark:border-gray-600 dark:hover:border-gray-700'
},
{
outline: true,
color: 'dark',
group: true,
class: 'bg-gray-900 border-gray-800 dark:border-white dark:bg-gray-600'
},
{
outline: true,
color: 'dark',
group: true,
class: 'dark:text-gray-400 dark:border-gray-700'
},
{
outline: true,
group: true,
class: '[&:not(:first-child)]:-ms-px'
},
{
color: 'alternative',
group: true,
class: '[&:not(:first-child)]:-ms-px'
},
{
color: 'light',
group: true,
class: '[&:not(:first-child)]:-ms-px'
},
{
group: true,
pill: true,
class: 'rounded-none first:rounded-s-full last:rounded-e-full'
},
{
group: true,
pill: false,
class: 'rounded-none first:rounded-s-lg last:rounded-e-lg'
},
{
group: false,
pill: true,
class: 'rounded-full'
},
{
group: false,
pill: false,
class: 'rounded-lg'
}
]
});
export const gradientButton = tv({
slots: {
base: 'inline-flex items-center justify-center transition-all duration-75 ease-in text-white bg-gradient-to-r ',
outlineWrapper: 'inline-flex items-center justify-center w-full !border-0'
},
variants: {
color: {
blue: {
base: 'from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-blue-300 dark:focus:ring-blue-800'
},
green: {
base: 'from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-green-300 dark:focus:ring-green-800'
},
cyan: {
base: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800'
},
teal: {
base: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-teal-300 dark:focus:ring-teal-800'
},
lime: {
base: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-lime-300 dark:focus:ring-lime-800'
},
red: {
base: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-red-300 dark:focus:ring-red-800'
},
pink: {
base: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-pink-300 dark:focus:ring-pink-800'
},
purple: {
base: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-purple-300 dark:focus:ring-purple-800'
},
purpleToBlue: {
base: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-blue-300 dark:focus:ring-blue-800'
},
cyanToBlue: {
base: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800'
},
greenToBlue: {
base: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-green-200 dark:focus:ring-green-800'
},
purpleToPink: {
base: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-purple-200 dark:focus:ring-purple-800'
},
pinkToOrange: {
base: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-pink-200 dark:focus:ring-pink-800'
},
tealToLime: {
base: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l focus:ring-lime-200 dark:focus:ring-teal-700'
},
redToYellow: {
base: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-red-100 dark:focus:ring-red-400'
}
},
outline: {
true: {
base: 'p-0.5',
outlineWrapper:
'bg-white !text-gray-900 dark:bg-gray-900 dark:!text-white hover:bg-transparent hover:!text-inherit group-hover:!bg-opacity-0 group-hover:!text-inherit'
}
},
pill: {
true: {
base: 'rounded-full',
outlineWrapper: 'rounded-full'
},
false: {
base: 'rounded-lg',
outlineWrapper: 'rounded-lg'
}
},
shadow: {
true: {
base: 'shadow-lg'
}
},
group: {
true: 'rounded-none',
false: ''
},
disabled: {
true: { base: 'opacity-50 cursor-not-allowed' }
}
},
compoundVariants: [
{
shadow: true,
color: 'blue',
class: { base: 'shadow-blue-500/50 dark:shadow-blue-800/80' }
},
{
shadow: true,
color: 'green',
class: { base: 'shadow-green-500/50 dark:shadow-green-800/80' }
},
{
shadow: true,
color: 'cyan',
class: { base: 'shadow-cyan-500/50 dark:shadow-cyan-800/80' }
},
{
shadow: true,
color: 'teal',
class: { base: 'shadow-teal-500/50 dark:shadow-teal-800/80' }
},
{
shadow: true,
color: 'lime',
class: { base: 'shadow-lime-500/50 dark:shadow-lime-800/80' }
},
{
shadow: true,
color: 'red',
class: { base: 'shadow-red-500/50 dark:shadow-red-800/80' }
},
{
shadow: true,
color: 'pink',
class: { base: 'shadow-pink-500/50 dark:shadow-pink-800/80' }
},
{
shadow: true,
color: 'purple',
class: { base: 'shadow-purple-500/50 dark:shadow-purple-800/80' }
},
{
shadow: true,
color: 'purpleToBlue',
class: { base: 'shadow-blue-500/50 dark:shadow-blue-800/80' }
},
{
shadow: true,
color: 'cyanToBlue',
class: { base: 'shadow-cyan-500/50 dark:shadow-cyan-800/80' }
},
{
shadow: true,
color: 'greenToBlue',
class: { base: 'shadow-green-500/50 dark:shadow-green-800/80' }
},
{
shadow: true,
color: 'purpleToPink',
class: { base: 'shadow-purple-500/50 dark:shadow-purple-800/80' }
},
{
shadow: true,
color: 'pinkToOrange',
class: { base: 'shadow-pink-500/50 dark:shadow-pink-800/80' }
},
{
shadow: true,
color: 'tealToLime',
class: { base: 'shadow-lime-500/50 dark:shadow-teal-800/80' }
},
{
shadow: true,
color: 'redToYellow',
class: { base: 'shadow-red-500/50 dark:shadow-red-800/80' }
},
{
group: true,
pill: true,
class: 'first:rounded-s-full last:rounded-e-full'
},
{
group: true,
pill: false,
class: 'first:rounded-s-lg last:rounded-e-lg'
}
]
});
================================================
FILE: src/lib/buttons/type.ts
================================================
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
type ButtonColorType =
| 'primary'
| 'dark'
| 'alternative'
| 'light'
| 'secondary'
| 'gray'
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose';
type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl' | 'xs' | undefined;
type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, 'on:abort'> &
Omit<HTMLAnchorAttributes, 'on:abort'>;
interface ButtonProps extends HTMLAttributesWithoutAbort {
children: Snippet;
pill?: boolean;
outline?: boolean;
size?: ButtonSizeType;
color?: ButtonColorType;
shadow?: boolean;
tag?: string;
checked?: boolean;
class?: string;
disabled?: boolean;
href?: string;
}
type GradientButtonColorType =
| 'red'
| 'lime'
| 'green'
| 'teal'
| 'cyan'
| 'blue'
| 'purple'
| 'pink'
| 'purpleToBlue'
| 'cyanToBlue'
| 'greenToBlue'
| 'purpleToPink'
| 'pinkToOrange'
| 'tealToLime'
| 'redToYellow'
| undefined;
interface GradientButtonProps extends HTMLAttributesWithoutAbort {
children: Snippet;
pill?: boolean;
outline?: boolean;
size?: ButtonSizeType;
color?: GradientButtonColorType;
shadow?: boolean;
tag?: string;
checked?: boolean;
class?: string;
disabled?: boolean;
href?: string;
}
export { type ButtonProps, type GradientButtonProps };
================================================
FILE: src/lib/cards/Card.svelte
================================================
<script lang="ts">
import { card, type CardProps as Props } from '.';
import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
let {
children,
href,
color = 'gray',
horizontal = false,
shadow = 'md',
reverse = false,
img,
padding = 'lg',
size = 'sm',
class: className,
imgClass,
contentClass,
...restProps
}: Props = $props();
const { base, image, content } = $derived(
card({
size,
color,
shadow,
padding,
horizontal,
reverse,
href: !!href
})
);
/* eslint-disable @typescript-eslint/no-explicit-any */
const commonProps: Record<string, any> = $derived({
class: base({ class: className }),
...restProps
});
const anchorProps: HTMLAnchorAttributes = $derived({
...commonProps,
href
});
const divProps: HTMLAttributes<HTMLDivElement> = $derived({
...commonProps
});
</script>
{#snippet childSlot()}
{#if img}
<img class={image({ class: imgClass })} src={img.src} alt={img.alt} />
<div class={content({ class: contentClass })}>
{@render children()}
</div>
{:else}
<div class={content({ class: contentClass })}>
{@render children()}
</div>
{/if}
{/snippet}
{#if href}
<a {...anchorProps}>
{@render childSlot()}
</a>
{:else}
<div {...divProps}>
{@render childSlot()}
</div>
{/if}
================================================
FILE: src/lib/cards/index.ts
================================================
import type { CardProps } from './type';
import Card from './Card.svelte';
import { card } from './theme';
export { Card, card, type CardProps };
================================================
FILE: src/lib/cards/theme.ts
================================================
import { tv } from 'tailwind-variants';
export const card = tv({
slots: {
base: 'w-full flex max-w-sm bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700',
image: 'rounded-t-lg',
content: ''
},
variants: {
size: {
xs: { base: 'max-w-xs' },
sm: { base: 'max-w-sm' },
md: { base: 'max-w-lg' },
lg: { base: 'max-w-2xl' },
xl: { base: 'max-w-screen-xl' }
},
color: {
// primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
gray: { base: 'border-gray-200 dark:bg-gray-800 dark:border-gray-700' },
primary: {
base: 'border-primary-200 bg-primary-400 dark:bg-primary-800 dark:border-primary-700'
},
secondary: {
base: 'border-secondary-200 bg-secondary-400 dark:bg-secondary-800 dark:border-secondary-700'
},
red: { base: 'border-red-200 bg-red-400 dark:bg-red-800 dark:border-red-700' },
orange: { base: 'border-orange-200 bg-orange-400 dark:bg-orange-800 dark:border-orange-700' },
amber: { base: 'border-amber-200 bg-amber-400 dark:bg-amber-800 dark:border-amber-700' },
yellow: { base: 'border-yellow-200 bg-yellow-400 dark:bg-yellow-800 dark:border-yellow-700' },
lime: { base: 'border-lime-200 bg-lime-400 dark:bg-lime-800 dark:border-lime-700' },
green: { base: 'border-green-200 bg-green-400 dark:bg-green-800 dark:border-green-700' },
emerald: {
base: 'border-emerald-200 bg-emerald-400 dark:bg-emerald-800 dark:border-emerald-700'
},
teal: { base: 'border-teal-200 bg-teal-400 dark:bg-teal-800 dark:border-teal-700' },
cyan: { base: 'border-cyan-200 bg-cyan-400 dark:bg-cyan-800 dark:border-cyan-700' },
sky: { base: 'border-sky-200 bg-sky-400 dark:bg-sky-800 dark:border-sky-700' },
blue: { base: 'border-blue-200 bg-blue-400 dark:bg-blue-800 dark:border-blue-700' },
indigo: { base: 'border-indigo-200 bg-indigo-400 dark:bg-indigo-800 dark:border-indigo-700' },
violet: { base: 'border-violet-200 bg-violet-400 dark:bg-violet-800 dark:border-violet-700' },
purple: { base: 'border-purple-200 bg-purple-400 dark:bg-purple-800 dark:border-purple-700' },
fuchsia: {
base: 'border-fuchsia-200 bg-fuchsia-400 dark:bg-fuchsia-800 dark:border-fuchsia-700'
},
pink: { base: 'border-pink-200 bg-pink-400 dark:bg-pink-800 dark:border-pink-700' },
rose: { base: 'border-rose-200 bg-rose-400 dark:bg-rose-800 dark:border-rose-700' }
},
shadow: {
sm: { base: 'shadow-md' },
normal: { base: 'shadow' },
md: { base: 'shadow-md' },
lg: { base: 'shadow-lg' },
xl: { base: 'shadow-xl' },
'2xl': { base: 'shadow-2xl' },
inner: { base: 'shadow-inner' }
},
padding: {
xs: { content: 'p-2' },
sm: { content: 'p-4 md:p-6' },
md: { content: 'p-4 sm:p-5 md:p-7' },
lg: { content: 'p-4 sm:p-6 md:p-8' },
xl: { content: 'p-4 sm:p-8 md:p-10' },
none: { content: 'p-0' }
},
horizontal: {
true: {
base: 'md:flex-row',
image: 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none'
}
},
reverse: {
true: { base: 'flex-col-reverse', image: 'rounded-b-lg rounded-tl-none' },
false: { base: 'flex-col', image: 'rounded-t-lg' }
},
href: {
true: '',
false: ''
},
hasImage: {
true: '',
false: ''
}
},
compoundVariants: [
{
horizontal: true,
reverse: true,
class: { base: 'md:flex-row-reverse', image: 'md:rounded-e-lg' }
},
{
horizontal: true,
reverse: false,
class: { base: 'md:flex-row', image: 'md:rounded-s-lg' }
},
// gray, primary, secondary, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
{
href: true,
color: 'gray',
class: { base: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700' }
},
{
href: true,
color: 'primary',
class: { base: 'cursor-pointer hover:bg-primary-500 dark:hover:bg-primary-700' }
},
{
href: true,
color: 'secondary',
class: { base: 'cursor-pointer hover:bg-secondary-500 dark:hover:bg-secondary-700' }
},
{
href: true,
color: 'red',
class: { base: 'cursor-pointer hover:bg-red-500 dark:hover:bg-red-700' }
},
{
href: true,
color: 'orange',
class: { base: 'cursor-pointer hover:bg-orange-500 dark:hover:bg-orange-700' }
},
{
href: true,
color: 'amber',
class: { base: 'cursor-pointer hover:bg-amber-500 dark:hover:bg-amber-700' }
},
{
href: true,
color: 'yellow',
class: { base: 'cursor-pointer hover:bg-yellow-500 dark:hover:bg-yellow-700' }
},
{
href: true,
color: 'lime',
class: { base: 'cursor-pointer hover:bg-lime-500 dark:hover:bg-lime-700' }
},
{
href: true,
color: 'green',
class: { base: 'cursor-pointer hover:bg-green-500 dark:hover:bg-green-700' }
},
{
href: true,
color: 'emerald',
class: { base: 'cursor-pointer hover:bg-emerald-500 dark:hover:bg-emerald-700' }
},
{
href: true,
color: 'teal',
class: { base: 'cursor-pointer hover:bg-teal-500 dark:hover:bg-teal-700' }
},
{
href: true,
color: 'cyan',
class: { base: 'cursor-pointer hover:bg-cyan-500 dark:hover:bg-cyan-700' }
},
{
href: true,
color: 'sky',
class: { base: 'cursor-pointer hover:bg-sky-500 dark:hover:bg-sky-700' }
},
{
href: true,
color: 'blue',
class: { base: 'cursor-pointer hover:bg-blue-500 dark:hover:bg-blue-700' }
},
{
href: true,
color: 'indigo',
class: { base: 'cursor-pointer hover:bg-indigo-500 dark:hover:bg-indigo-700' }
},
{
href: true,
color: 'violet',
class: { base: 'cursor-pointer hover:bg-violet-500 dark:hover:bg-violet-700' }
},
{
href: true,
color: 'purple',
class: { base: 'cursor-pointer hover:bg-purple-500 dark:hover:bg-purple-700' }
},
{
href: true,
color: 'fuchsia',
class: { base: 'cursor-pointer hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700' }
},
{
href: true,
color: 'pink',
class: { base: 'cursor-pointer hover:bg-pink-500 dark:hover:bg-pink-700' }
},
{
href: true,
color: 'rose',
class: { base: 'cursor-pointer hover:bg-rose-500 dark:hover:bg-rose-700' }
}
],
defaultVariants: {
size: 'sm',
shadow: 'normal',
padding: 'lg',
horizontal: false,
reverse: false
}
});
================================================
FILE: src/lib/cards/type.ts
================================================
import type { Snippet } from 'svelte';
import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
// type CardSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type CardSizeType = 'sm' | 'md' | 'lg' | 'xl' | 'xs' | undefined;
type PaddingType = 'sm' | 'lg' | 'md' | 'xl' | 'xs' | 'none' | undefined;
type ShadowType = 'sm' | 'normal' | 'lg' | 'md' | 'xl' | '2xl' | 'inner' | undefined;
type ColorType =
| 'gray'
| 'primary'
| 'secondary'
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose'
| undefined;
type ImgType = {
src?: string | undefined | null;
alt?: string | undefined | null;
};
interface BaseCardProps {
children: Snippet;
horizontal?: boolean;
color?: ColorType;
target?: string;
shadow?: ShadowType;
reverse?: boolean;
img?: ImgType;
padding?: PaddingType;
size?: CardSizeType;
class?: string;
// onclick?: () => void;
imgClass?: string;
contentClass?: string;
}
type CardProps = BaseCardProps &
(({ href: string } & HTMLAnchorAttributes) | ({ href?: never } & HTMLAttributes<HTMLDivElement>));
export { type CardProps };
================================================
FILE: src/lib/chart/Chart.svelte
================================================
<script lang="ts">
import type { ApexOptions } from 'apexcharts';
import type ApexCharts from 'apexcharts';
import './chart.css';
import { type ChartProps as Props } from '.';
let { options, class: classname }: Props = $props();
function initChart(node: HTMLElement, options: ApexOptions) {
let chart: ApexCharts;
async function asyncInitChart() {
const ApexCharts = (await import('apexcharts')).default;
chart = new ApexCharts(node, options);
chart.render();
}
asyncInitChart();
return {
update(options: ApexOptions) {
if (chart) {
chart.updateOptions(options);
}
},
destroy() {
if (chart) {
chart.destroy();
}
}
};
}
</script>
<div use:initChart={options} class={classname}></div>
================================================
FILE: src/lib/chart/chart.css
================================================
.apexcharts-canvas .apexcharts-tooltip {
background-color: white;
color: #6b7280;
border: 0 !important;
border-radius: 0.25rem;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .apexcharts-canvas .apexcharts-tooltip {
background-color: #374151;
color: #9ca3af;
border-color: transparent;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-bottom: 0.75rem;
background-color: #f3f4f6;
border-bottom-color: #e5e7eb;
font-size: 0.875rem !important;
font-weight: 400;
color: #6b7280;
}
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
background-color: #4b5563;
border-color: #6b7280;
color: #9ca3af;
}
.apexcharts-canvas .apexcharts-xaxistooltip {
color: #6b7280;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 0.75rem;
padding-left: 0.75rem;
border-color: transparent;
background-color: white;
border-radius: 0.25rem;
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .apexcharts-canvas .apexcharts-xaxistooltip {
color: #9ca3af;
background-color: #374151;
}
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
color: #6b7280;
font-size: 0.875rem;
}
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-label {
color: #9ca3af;
}
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
color: #111827;
font-size: 0.875rem;
}
:is([dir='rtl']) .apexcharts-tooltip .apexcharts-tooltip-marker {
margin-right: 0px;
margin-left: e;
}
.dark .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
color: white;
}
.apexcharts-canvas .apexcharts-xaxistooltip-text {
font-weight: 400;
font-size: 0.875rem !important;
}
.apexcharts-canvas .apexcharts-xaxistooltip:after,
.apexcharts-canvas .apexcharts-xaxistooltip:before {
border-bottom-color: white;
}
.apexcharts-canvas .apexcharts-xaxistooltip:after {
border-width: 8px;
margin-left: -8px;
}
.apexcharts-canvas .apexcharts-xaxistooltip:before {
border-width: 10px;
margin-left: -10px;
}
.dark .apexcharts-canvas .apexcharts-xaxistooltip:after,
.dark .apexcharts-canvas .apexcharts-xaxistooltip:before {
border-bottom-color: #374151;
}
.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-y-group {
padding: 0;
}
.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
background-color: white !important;
color: #6b7280 !important;
}
.dark .apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active {
background-color: #374151 !important;
color: #9ca3af !important;
}
.apexcharts-canvas .apexcharts-tooltip-series-group.apexcharts-active:first-of-type {
padding-top: 0.75rem;
}
.apexcharts-canvas .apexcharts-legend {
padding: 0 !important;
}
.apexcharts-canvas .apexcharts-legend-text {
font-size: 0.75rem;
font-weight: 500 !important;
padding-left: 1.25rem;
color: #6b7280 !important;
}
:is([dir='rtl']) .apexcharts-canvas .apexcharts-legend-text {
padding-right: 0.5rem;
}
.apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
color: #111827 !important;
}
.dark .apexcharts-canvas .apexcharts-legend-text {
color: #9ca3af !important;
}
.dark .apexcharts-canvas .apexcharts-legend-text:not(.apexcharts-inactive-legend):hover {
color: white !important;
}
.apexcharts-canvas .apexcharts-legend-series {
margin-left: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.25rem !important;
display: flex;
align-items: center;
}
.apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
fill: #111827 !important;
font-size: 1.875rem;
font-weight: 700;
}
.dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-value {
fill: white !important;
}
.apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
fill: #6b7280 !important;
font-size: 1rem;
font-weight: 400;
}
.dark .apexcharts-canvas .apexcharts-datalabels-group .apexcharts-text.apexcharts-datalabel-label {
fill: #9ca3af !important;
}
.apexcharts-canvas .apexcharts-datalabels .apexcharts-text.apexcharts-pie-label {
font-size: 0.75rem !important;
font-weight: 600 !important;
text-shadow: none !important;
filter: none !important;
}
.apexcharts-gridline,
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
stroke: #e5e7eb !important;
}
.dark .apexcharts-gridline,
.dark .apexcharts-xcrosshairs,
.dark .apexcharts-ycrosshairs {
stroke: #374151 !important;
}
================================================
FILE: src/lib/chart/index.ts
gitextract_vlhoivw6/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── License ├── README.md ├── e2e/ │ ├── alert.test.ts │ ├── components.test.ts │ ├── forms.test.ts │ ├── home.test.ts │ ├── other.test.ts │ └── typography.test.ts ├── eslint.config.js ├── package.json ├── playwright.config.ts ├── scripts/ │ └── generateFileList.ts ├── src/ │ ├── app.css │ ├── app.d.ts │ ├── app.html │ ├── demo.spec.ts │ ├── generatedFileList.ts │ ├── lib/ │ │ ├── accordion/ │ │ │ ├── Accordion.svelte │ │ │ ├── AccordionItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── alert/ │ │ │ ├── Alert.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── avatar/ │ │ │ ├── Avatar.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── badge/ │ │ │ ├── Badge.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── banner/ │ │ │ ├── Banner.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── bottom-navigation/ │ │ │ ├── BottomNav.svelte │ │ │ ├── BottomNavHeader.svelte │ │ │ ├── BottomNavHeaderItem.svelte │ │ │ ├── BottomNavItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── breadcrumb/ │ │ │ ├── Breadcrumb.svelte │ │ │ ├── BreadcrumbItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── buttongroup/ │ │ │ ├── ButtonGroup.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── buttons/ │ │ │ ├── Button.svelte │ │ │ ├── GradientButton.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── cards/ │ │ │ ├── Card.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── chart/ │ │ │ ├── Chart.svelte │ │ │ ├── chart.css │ │ │ ├── index.ts │ │ │ └── type.ts │ │ ├── darkmode/ │ │ │ ├── Darkmode.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── device-mockups/ │ │ │ ├── Android.svelte │ │ │ ├── DefaultMockup.svelte │ │ │ ├── Desktop.svelte │ │ │ ├── DeviceMockup.svelte │ │ │ ├── Ios.svelte │ │ │ ├── Laptop.svelte │ │ │ ├── Smartwatch.svelte │ │ │ ├── Tablet.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── drawer/ │ │ │ ├── Drawer.svelte │ │ │ ├── Drawerhead.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── dropdown/ │ │ │ ├── Dropdown.svelte │ │ │ ├── DropdownDivider.svelte │ │ │ ├── DropdownFooter.svelte │ │ │ ├── DropdownHeader.svelte │ │ │ ├── DropdownLi.svelte │ │ │ ├── DropdownUl.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── footer/ │ │ │ ├── Footer.svelte │ │ │ ├── FooterBrand.svelte │ │ │ ├── FooterCopyright.svelte │ │ │ ├── FooterIcon.svelte │ │ │ ├── FooterLi.svelte │ │ │ ├── FooterUl.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── forms/ │ │ │ ├── checkbox/ │ │ │ │ ├── Checkbox.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── checkbox-button/ │ │ │ │ ├── CheckboxButton.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── dropzone/ │ │ │ │ ├── Dropzone.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── fileupload/ │ │ │ │ ├── Fileupload.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── floating-label-input/ │ │ │ │ ├── FloatingLabelInput.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── helper/ │ │ │ │ ├── Helper.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── input/ │ │ │ │ ├── Input.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── input-addon/ │ │ │ │ ├── InputAddon.svelte │ │ │ │ ├── index.ts │ │ │ │ └── type.ts │ │ │ ├── label/ │ │ │ │ ├── Label.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── radio/ │ │ │ │ ├── Radio.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── radio-button/ │ │ │ │ ├── RadioButton.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── range/ │ │ │ │ ├── Range.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── search/ │ │ │ │ ├── Search.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── select/ │ │ │ │ ├── Select.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── textarea/ │ │ │ │ ├── Textarea.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ └── toggle/ │ │ │ ├── Toggle.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── gallery/ │ │ │ ├── Gallery.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── index.ts │ │ ├── indicator/ │ │ │ ├── Indicator.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── kbd/ │ │ │ ├── Kbd.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── list-group/ │ │ │ ├── Listgroup.svelte │ │ │ ├── ListgroupItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── mega-menu/ │ │ │ ├── MegaMenu.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── modal/ │ │ │ ├── Modal.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── nav/ │ │ │ ├── NavBrand.svelte │ │ │ ├── NavHamburger.svelte │ │ │ ├── NavLi.svelte │ │ │ ├── NavUl.svelte │ │ │ ├── Navbar.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── pagination/ │ │ │ ├── Pagination.svelte │ │ │ ├── PaginationItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── popover/ │ │ │ ├── Popover.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── progress/ │ │ │ ├── Progressbar.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── rating/ │ │ │ ├── AdvancedRating.svelte │ │ │ ├── CustomIcon.svelte │ │ │ ├── Heart.svelte │ │ │ ├── Rating.svelte │ │ │ ├── RatingComment.svelte │ │ │ ├── Review.svelte │ │ │ ├── ScoreRating.svelte │ │ │ ├── Star.svelte │ │ │ ├── Thumbup.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── sidebar/ │ │ │ ├── Sidebar.svelte │ │ │ ├── SidebarBrand.svelte │ │ │ ├── SidebarButton.svelte │ │ │ ├── SidebarCta.svelte │ │ │ ├── SidebarDropdownWrapper.svelte │ │ │ ├── SidebarGroup.svelte │ │ │ ├── SidebarItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── skeleton/ │ │ │ ├── CardPlaceholder.svelte │ │ │ ├── ImagePlaceholder.svelte │ │ │ ├── ListPlaceholder.svelte │ │ │ ├── Skeleton.svelte │ │ │ ├── TestimonialPlaceholder.svelte │ │ │ ├── TextPlaceholder.svelte │ │ │ ├── VideoPlaceholder.svelte │ │ │ ├── WidgetPlaceholder.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── spinner/ │ │ │ ├── Spinner.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── table/ │ │ │ ├── Table.svelte │ │ │ ├── TableBody.svelte │ │ │ ├── TableBodyCell.svelte │ │ │ ├── TableBodyRow.svelte │ │ │ ├── TableHead.svelte │ │ │ ├── TableHeadCell.svelte │ │ │ ├── TableSearch.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── tabs/ │ │ │ ├── TabItem.svelte │ │ │ ├── Tabs.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── theme/ │ │ │ └── Theme.svelte │ │ ├── timeline/ │ │ │ ├── Activity.svelte │ │ │ ├── ActivityItem.svelte │ │ │ ├── Group.svelte │ │ │ ├── GroupItem.svelte │ │ │ ├── Timeline.svelte │ │ │ ├── TimelineItem.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── toast/ │ │ │ ├── Toast.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── toolbar/ │ │ │ ├── Toolbar.svelte │ │ │ ├── ToolbarButton.svelte │ │ │ ├── ToolbarGroup.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── tooltip/ │ │ │ ├── Tooltip.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── types.ts │ │ ├── typography/ │ │ │ ├── anchor/ │ │ │ │ ├── A.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── blockquote/ │ │ │ │ ├── Blockquote.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── descriptionlist/ │ │ │ │ ├── DescriptionList.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── heading/ │ │ │ │ ├── Heading.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── hr/ │ │ │ │ ├── Hr.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── img/ │ │ │ │ ├── EnhancedImg.svelte │ │ │ │ ├── Img.svelte │ │ │ │ ├── ImgEnhanced.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── layout/ │ │ │ │ ├── Layout.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── list/ │ │ │ │ ├── Li.svelte │ │ │ │ ├── List.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── mark/ │ │ │ │ ├── Mark.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── paragraph/ │ │ │ │ ├── P.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ ├── secondary/ │ │ │ │ ├── Secondary.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── theme.ts │ │ │ │ └── type.ts │ │ │ └── span/ │ │ │ ├── Span.svelte │ │ │ ├── index.ts │ │ │ ├── theme.ts │ │ │ └── type.ts │ │ ├── uiHelpers.svelte.ts │ │ ├── utils/ │ │ │ ├── CloseButton.svelte │ │ │ ├── focusTrap.ts │ │ │ └── index.ts │ │ └── video/ │ │ ├── Video.svelte │ │ ├── index.ts │ │ └── type.ts │ └── routes/ │ ├── +layout.server.ts │ ├── +layout.svelte │ ├── +page.svelte │ ├── component-data/ │ │ ├── A.json │ │ ├── Accordion.json │ │ ├── AccordionItem.json │ │ ├── Activity.json │ │ ├── ActivityItem.json │ │ ├── AdvancedRating.json │ │ ├── Alert.json │ │ ├── Android.json │ │ ├── Avatar.json │ │ ├── Badge.json │ │ ├── Banner.json │ │ ├── Blockquote.json │ │ ├── BottomNav.json │ │ ├── BottomNavHeader.json │ │ ├── BottomNavHeaderItem.json │ │ ├── BottomNavItem.json │ │ ├── Breadcrumb.json │ │ ├── BreadcrumbItem.json │ │ ├── Button.json │ │ ├── ButtonGroup.json │ │ ├── Card.json │ │ ├── CardPlaceholder.json │ │ ├── Chart.json │ │ ├── Checkbox.json │ │ ├── CheckboxButton.json │ │ ├── CloseButton.json │ │ ├── CustomIcon.json │ │ ├── Darkmode.json │ │ ├── DefaultMockup.json │ │ ├── DescriptionList.json │ │ ├── Desktop.json │ │ ├── DeviceMockup.json │ │ ├── Drawer.json │ │ ├── Drawerhead.json │ │ ├── Dropdown.json │ │ ├── DropdownDivider.json │ │ ├── DropdownFooter.json │ │ ├── DropdownHeader.json │ │ ├── DropdownLi.json │ │ ├── DropdownUl.json │ │ ├── Dropzone.json │ │ ├── EnhancedImg.json │ │ ├── Fileupload.json │ │ ├── FloatingLabelInput.json │ │ ├── Footer.json │ │ ├── FooterBrand.json │ │ ├── FooterCopyright.json │ │ ├── FooterIcon.json │ │ ├── FooterLi.json │ │ ├── FooterUl.json │ │ ├── Gallery.json │ │ ├── GradientButton.json │ │ ├── Group.json │ │ ├── GroupItem.json │ │ ├── Heading.json │ │ ├── Heart.json │ │ ├── Helper.json │ │ ├── Hr.json │ │ ├── ImagePlaceholder.json │ │ ├── Img.json │ │ ├── ImgEnhanced.json │ │ ├── Indicator.json │ │ ├── Input.json │ │ ├── InputAddon.json │ │ ├── Ios.json │ │ ├── Kbd.json │ │ ├── Label.json │ │ ├── Laptop.json │ │ ├── Layout.json │ │ ├── Li.json │ │ ├── List.json │ │ ├── ListPlaceholder.json │ │ ├── Listgroup.json │ │ ├── ListgroupItem.json │ │ ├── Mark.json │ │ ├── MegaMenu.json │ │ ├── Modal.json │ │ ├── NavBrand.json │ │ ├── NavHamburger.json │ │ ├── NavLi.json │ │ ├── NavUl.json │ │ ├── Navbar.json │ │ ├── P.json │ │ ├── Pagination.json │ │ ├── PaginationItem.json │ │ ├── Popover.json │ │ ├── Progressbar.json │ │ ├── Radio.json │ │ ├── RadioButton.json │ │ ├── Range.json │ │ ├── Rating.json │ │ ├── RatingComment.json │ │ ├── Review.json │ │ ├── ScoreRating.json │ │ ├── Search.json │ │ ├── Secondary.json │ │ ├── Select.json │ │ ├── Sidebar.json │ │ ├── SidebarBrand.json │ │ ├── SidebarButton.json │ │ ├── SidebarCta.json │ │ ├── SidebarDropdownWrapper.json │ │ ├── SidebarGroup.json │ │ ├── SidebarItem.json │ │ ├── Skeleton.json │ │ ├── Smartwatch.json │ │ ├── Span.json │ │ ├── Spinner.json │ │ ├── Star.json │ │ ├── TabItem.json │ │ ├── Table.json │ │ ├── TableBody.json │ │ ├── TableBodyCell.json │ │ ├── TableBodyRow.json │ │ ├── TableHead.json │ │ ├── TableHeadCell.json │ │ ├── TableSearch.json │ │ ├── Tablet.json │ │ ├── Tabs.json │ │ ├── TestimonialPlaceholder.json │ │ ├── TextPlaceholder.json │ │ ├── Textarea.json │ │ ├── Thumbup.json │ │ ├── Timeline.json │ │ ├── TimelineItem.json │ │ ├── Toast.json │ │ ├── Toggle.json │ │ ├── Toolbar.json │ │ ├── ToolbarButton.json │ │ ├── ToolbarGroup.json │ │ ├── Tooltip.json │ │ ├── Video.json │ │ ├── VideoPlaceholder.json │ │ ├── WidgetPlaceholder.json │ │ ├── focusTrap.json │ │ ├── index.json │ │ ├── kisida.json │ │ ├── theme.json │ │ ├── types.json │ │ └── uiHelpers.svelte.json │ ├── components/ │ │ ├── accordion/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ArrowStyle.svelte │ │ │ ├── Color.svelte │ │ │ ├── Default.svelte │ │ │ ├── Flush.svelte │ │ │ ├── Icon.svelte │ │ │ ├── MultipleMode.svelte │ │ │ ├── Nesting.svelte │ │ │ ├── Open.svelte │ │ │ ├── OpenMultiple.svelte │ │ │ ├── Transitions.svelte │ │ │ └── index.ts │ │ ├── alert/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AdditionalContent.svelte │ │ │ ├── AlertWithList.svelte │ │ │ ├── CustomColor.svelte │ │ │ ├── Event.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── avatar/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AvatarText.svelte │ │ │ ├── AvatarWithTooltip.svelte │ │ │ ├── DotIndicator.svelte │ │ │ ├── Placeholder.svelte │ │ │ ├── PlaceholderInitial.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Stacked.svelte │ │ │ ├── UserDropdown.svelte │ │ │ └── index.ts │ │ ├── badge/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── BadgeWithIconOnly.svelte │ │ │ ├── ButtonWithBadge.svelte │ │ │ ├── DismissingWithCustomIcon.svelte │ │ │ ├── DismissingWithEvents.svelte │ │ │ ├── DynamicColor.svelte │ │ │ ├── NotificationBadge.svelte │ │ │ ├── OpeningBadge.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── banner/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── InformationBanner.svelte │ │ │ ├── NewsletterSignupBanner.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── bottom-navigation/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AnimatedIcons.svelte │ │ │ ├── ApplicationBar.svelte │ │ │ ├── Border.svelte │ │ │ ├── ButtonGroup.svelte │ │ │ ├── Card.svelte │ │ │ ├── Default.svelte │ │ │ ├── IconColor.svelte │ │ │ ├── LinkAndActiveClass.svelte │ │ │ ├── OverwritingActiveClass.svelte │ │ │ ├── Pagination.svelte │ │ │ └── index.ts │ │ ├── breadcrumb/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Default.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Solid.svelte │ │ │ └── index.ts │ │ ├── button/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ButtonWithIcon.svelte │ │ │ ├── ButtonWithLabel.svelte │ │ │ ├── Events.svelte │ │ │ ├── IconButtons.svelte │ │ │ ├── Loader.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── button-group/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── DualtoneGradient.svelte │ │ │ ├── DualtoneGradientPill.svelte │ │ │ ├── Events.svelte │ │ │ ├── GradientShadow.svelte │ │ │ ├── OutlineButtons.svelte │ │ │ ├── PillButtons.svelte │ │ │ ├── Setup.svelte │ │ │ ├── StandardButtons.svelte │ │ │ └── index.ts │ │ ├── card/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── CallToActionCard.svelte │ │ │ ├── CardWithActionButton.svelte │ │ │ ├── CustomSize.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── carousel/ │ │ │ └── +page.svelte │ │ ├── darkmode/ │ │ │ ├── +page.svelte │ │ │ ├── examples/ │ │ │ │ ├── Default.svelte │ │ │ │ ├── Icon.svelte │ │ │ │ ├── Style.svelte │ │ │ │ └── index.ts │ │ │ └── md/ │ │ │ ├── initialtheme.md │ │ │ └── setup.md │ │ ├── device-mockup/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── drawer/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ContactForm.svelte │ │ │ ├── DrawerNavigation.svelte │ │ │ ├── FormElements.svelte │ │ │ ├── Offset.svelte │ │ │ ├── Onmouseenter.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── dropdown/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ActiveLink.svelte │ │ │ ├── AvatarWithName.svelte │ │ │ ├── Checkbox.svelte │ │ │ ├── HelperText.svelte │ │ │ ├── MenuIcon.svelte │ │ │ ├── MultiLevel.svelte │ │ │ ├── Navbar.svelte │ │ │ ├── NotificationBell.svelte │ │ │ ├── PlacementBottom.svelte │ │ │ ├── PlacementLeft.svelte │ │ │ ├── PlacementRight.svelte │ │ │ ├── PlacementTop.svelte │ │ │ ├── Radio.svelte │ │ │ ├── Scrolling.svelte │ │ │ ├── Search.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Toggle.svelte │ │ │ ├── UserAvatar.svelte │ │ │ └── index.ts │ │ ├── footer/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Default.svelte │ │ │ ├── Logo.svelte │ │ │ ├── Setup.svelte │ │ │ ├── SitemapLink.svelte │ │ │ ├── SocialMedia.svelte │ │ │ ├── Sticky.svelte │ │ │ └── index.ts │ │ ├── gallery/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── CustomImageRendering.svelte │ │ │ ├── Default.svelte │ │ │ ├── FeaturedImage.svelte │ │ │ ├── GalleryWithTag.svelte │ │ │ ├── Heterogeneous.svelte │ │ │ ├── MansoryGrid.svelte │ │ │ ├── Quad.svelte │ │ │ └── index.ts │ │ ├── indicators/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Badge.svelte │ │ │ ├── Count.svelte │ │ │ ├── Legend.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Status.svelte │ │ │ ├── Stepper.svelte │ │ │ └── index.ts │ │ ├── kbd/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ArrowKeys.svelte │ │ │ ├── Default.svelte │ │ │ ├── InsideTable.svelte │ │ │ ├── InsideText.svelte │ │ │ ├── LetterKeys.svelte │ │ │ └── index.ts │ │ ├── list-group/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Advanced.svelte │ │ │ ├── Default.svelte │ │ │ ├── WithButtons.svelte │ │ │ ├── WithIcons.svelte │ │ │ ├── WithLinks.svelte │ │ │ └── index.ts │ │ ├── mega-menu/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Default.svelte │ │ │ ├── Icon.svelte │ │ │ └── index.ts │ │ ├── modal/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── CryptoWallet.svelte │ │ │ ├── Default.svelte │ │ │ ├── DisableOutsideclose.svelte │ │ │ ├── FooterSnippet.svelte │ │ │ ├── Form.svelte │ │ │ ├── HeaderSnippet.svelte │ │ │ ├── Popup.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── navbar/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── BackgroundColor.svelte │ │ │ ├── Breakpoint.svelte │ │ │ ├── CtaButton.svelte │ │ │ ├── Default.svelte │ │ │ ├── Dropdown.svelte │ │ │ ├── SearchNavbar.svelte │ │ │ ├── Sticky.svelte │ │ │ ├── UserDropdown.svelte │ │ │ └── index.ts │ │ ├── pagination/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Default.svelte │ │ │ ├── Event.svelte │ │ │ ├── Icons.svelte │ │ │ ├── PreviousAndNext.svelte │ │ │ ├── PreviousAndNextWithIcons.svelte │ │ │ ├── TableDataPagination.svelte │ │ │ ├── TableDataWithIcons.svelte │ │ │ └── index.ts │ │ ├── popover/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── CompanyProfile.svelte │ │ │ ├── Description.svelte │ │ │ ├── ExternalReference.svelte │ │ │ ├── Image.svelte │ │ │ ├── Password.svelte │ │ │ ├── Progress.svelte │ │ │ ├── Setup.svelte │ │ │ ├── TitleSlot.svelte │ │ │ ├── UserProfile.svelte │ │ │ └── index.ts │ │ ├── progress/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── rating/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AdvancedRating.svelte │ │ │ ├── AdvancedRatingAndIcon.svelte │ │ │ ├── Count.svelte │ │ │ ├── CustomIcon.svelte │ │ │ ├── Default.svelte │ │ │ ├── Icon.svelte │ │ │ ├── RatingComment.svelte │ │ │ ├── ReviewContent.svelte │ │ │ ├── ScoreRating.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Star.svelte │ │ │ ├── Text.svelte │ │ │ └── index.ts │ │ ├── sidebar/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ActiveClass.svelte │ │ │ ├── AllOpen.svelte │ │ │ ├── AnimatedIcons.svelte │ │ │ ├── BrandingWithChildren.svelte │ │ │ ├── CloseButton.svelte │ │ │ ├── ContentSeparator.svelte │ │ │ ├── Cta.svelte │ │ │ ├── Default.svelte │ │ │ ├── DropdownTransition.svelte │ │ │ ├── Icon.svelte │ │ │ ├── LogoBranding.svelte │ │ │ ├── Multilevel.svelte │ │ │ ├── OverridingActive.svelte │ │ │ ├── SingleSelection.svelte │ │ │ ├── StaticPositioning.svelte │ │ │ ├── UsingObject.svelte │ │ │ └── index.ts │ │ ├── skeleton/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── speed-dial/ │ │ │ └── +page.svelte │ │ ├── spinner/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Button.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── table/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Cells.svelte │ │ │ ├── Checkbox.svelte │ │ │ ├── ClickDoubleClick.svelte │ │ │ ├── FooterSlot.svelte │ │ │ ├── HeadBodyItems.svelte │ │ │ ├── HeaderSlot.svelte │ │ │ ├── Hover.svelte │ │ │ ├── NoBorder.svelte │ │ │ ├── Overflow.svelte │ │ │ ├── Search.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Shadow.svelte │ │ │ ├── Striped.svelte │ │ │ ├── TableCaption.svelte │ │ │ ├── TableItems.svelte │ │ │ └── index.ts │ │ ├── tabs/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AnimatedIcons.svelte │ │ │ ├── ComponentsInTabContents.svelte │ │ │ ├── FullWidth.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── timeline/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ActivityLog.svelte │ │ │ ├── DateFormat.svelte │ │ │ ├── DefaultTimeline.svelte │ │ │ ├── GroupedTimeline.svelte │ │ │ ├── HorizontalTimeline.svelte │ │ │ ├── Setup.svelte │ │ │ ├── VerticalTimeline.svelte │ │ │ └── index.ts │ │ ├── toast/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── InteractiveToast.svelte │ │ │ ├── PushNotification.svelte │ │ │ ├── Setup.svelte │ │ │ ├── ToastMessage.svelte │ │ │ ├── UndoButton.svelte │ │ │ └── index.ts │ │ ├── tooltip/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ExternalControl.svelte │ │ │ ├── ExternalReference.svelte │ │ │ ├── Inline.svelte │ │ │ ├── Setup.svelte │ │ │ ├── ShowOnClick.svelte │ │ │ └── index.ts │ │ └── video/ │ │ ├── +page.svelte │ │ └── examples/ │ │ └── Setup.svelte │ ├── forms/ │ │ ├── checkbox/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Advanced.svelte │ │ │ ├── Bordered.svelte │ │ │ ├── Button.svelte │ │ │ ├── Dropdown.svelte │ │ │ ├── GroupVariable.svelte │ │ │ ├── HorizontalList.svelte │ │ │ ├── InlineLayout.svelte │ │ │ ├── Link.svelte │ │ │ ├── ListGroup.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Table.svelte │ │ │ └── index.ts │ │ ├── file-input/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Clearable.svelte │ │ │ ├── Dropzone.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── floating-label/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── input-field/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AdvancedUsage.svelte │ │ │ ├── Clearable.svelte │ │ │ ├── ClickHandler.svelte │ │ │ ├── Dropdown.svelte │ │ │ ├── Form.svelte │ │ │ ├── Group.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Number.svelte │ │ │ ├── Search.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── label/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── radio/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AdvancedLayout.svelte │ │ │ ├── Bordered.svelte │ │ │ ├── HorizontalListGroup.svelte │ │ │ ├── InlineLayout.svelte │ │ │ ├── RadioButton.svelte │ │ │ ├── RadioInDropdown.svelte │ │ │ ├── RadioListGroup.svelte │ │ │ ├── RadioWithALink.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── range/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ ├── search-input/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Dropdown.svelte │ │ │ ├── Location.svelte │ │ │ ├── Setup.svelte │ │ │ ├── SimpleSearch.svelte │ │ │ ├── SizeLarge.svelte │ │ │ ├── ValueBinding.svelte │ │ │ ├── Voice.svelte │ │ │ └── index.ts │ │ ├── select/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── CustomOptions.svelte │ │ │ ├── DropdownSelect.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── textarea/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ChatroomInput.svelte │ │ │ ├── CommentBox.svelte │ │ │ ├── Default.svelte │ │ │ ├── WysiwygEditor.svelte │ │ │ └── index.ts │ │ └── toggle/ │ │ ├── +page.svelte │ │ └── examples/ │ │ ├── CustomSize.svelte │ │ ├── Loading.svelte │ │ ├── Setup.svelte │ │ └── index.ts │ ├── md/ │ │ ├── app-css.md │ │ ├── flowbite-svelte-icons.md │ │ ├── install-svelte.md │ │ ├── runes.md │ │ ├── svelte-5-ui-lib.md │ │ ├── svg-icons.md │ │ ├── tailwind-config.md │ │ └── tailwind.md │ ├── pages/ │ │ ├── about/ │ │ │ └── +page.svelte │ │ ├── coverage/ │ │ │ └── +page.svelte │ │ └── theme/ │ │ ├── +page.svelte │ │ └── theme.config.ts │ ├── plugins/ │ │ └── chart/ │ │ ├── +page.svelte │ │ └── md/ │ │ ├── area-chart.md │ │ ├── bar-chart.md │ │ ├── column-chart.md │ │ └── setup.md │ ├── sitemap.xml/ │ │ └── +server.ts │ ├── testdir/ │ │ ├── +layout.svelte │ │ ├── +page.svelte │ │ ├── GrandChild.svelte │ │ └── Table.svelte │ ├── typography/ │ │ ├── blockquote/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Context.svelte │ │ │ ├── Default.svelte │ │ │ ├── Icon.svelte │ │ │ ├── Review.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Solid.svelte │ │ │ ├── Testimonial.svelte │ │ │ └── index.ts │ │ ├── heading/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Badge.svelte │ │ │ ├── Breadcrumb.svelte │ │ │ ├── Default.svelte │ │ │ ├── Gradient.svelte │ │ │ ├── Highlighted.svelte │ │ │ ├── Mark.svelte │ │ │ ├── SecondLevel.svelte │ │ │ ├── Secondary.svelte │ │ │ ├── Setup.svelte │ │ │ ├── Underline.svelte │ │ │ └── index.ts │ │ ├── hr/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── image/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── Enhanced.svelte │ │ │ ├── ImportEx.svelte │ │ │ ├── RetinaReady.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── layout/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── OneColumn.svelte │ │ │ ├── Setup.svelte │ │ │ ├── ThreeColumnsEven.svelte │ │ │ ├── TwoColumnsEven.svelte │ │ │ ├── TwoColumnsUneven.svelte │ │ │ └── index.ts │ │ ├── link/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── ButtonLink.svelte │ │ │ ├── CardLink.svelte │ │ │ ├── CardWithImage.svelte │ │ │ ├── CtaLink.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── list/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ ├── AdvancedLayout.svelte │ │ │ ├── DescriptionList.svelte │ │ │ ├── HorizontalList.svelte │ │ │ ├── Setup.svelte │ │ │ └── index.ts │ │ ├── paragraph/ │ │ │ ├── +page.svelte │ │ │ └── examples/ │ │ │ └── Setup.svelte │ │ └── span/ │ │ ├── +page.svelte │ │ └── examples/ │ │ └── Setup.svelte │ └── utils/ │ ├── CodeWrapper.svelte │ ├── CompoAttributesViewer.svelte │ ├── DynamicCodeBlockHighlight.svelte │ ├── DynamicCodeBlockStyle.svelte │ ├── Footer.svelte │ ├── GitHub.svelte │ ├── H1.svelte │ ├── H2.svelte │ ├── H3.svelte │ ├── HighlightCompo.svelte │ ├── PlusPlaceholder.svelte │ ├── TableDefaultRow.svelte │ ├── TableProp.svelte │ ├── anchor/ │ │ ├── Anchor.svelte │ │ ├── index.ts │ │ └── theme.ts │ ├── heading/ │ │ ├── H1.svelte │ │ ├── H2.svelte │ │ ├── H3.svelte │ │ ├── index.ts │ │ └── theme.ts │ ├── helpers.ts │ ├── highlight/ │ │ ├── languages/ │ │ │ ├── 1c.d.ts │ │ │ ├── 1c.js │ │ │ ├── abnf.d.ts │ │ │ ├── abnf.js │ │ │ ├── accesslog.d.ts │ │ │ ├── accesslog.js │ │ │ ├── actionscript.d.ts │ │ │ ├── actionscript.js │ │ │ ├── ada.d.ts │ │ │ ├── ada.js │ │ │ ├── angelscript.d.ts │ │ │ ├── angelscript.js │ │ │ ├── apache.d.ts │ │ │ ├── apache.js │ │ │ ├── applescript.d.ts │ │ │ ├── applescript.js │ │ │ ├── arcade.d.ts │ │ │ ├── arcade.js │ │ │ ├── arduino.d.ts │ │ │ ├── arduino.js │ │ │ ├── armasm.d.ts │ │ │ ├── armasm.js │ │ │ ├── asciidoc.d.ts │ │ │ ├── asciidoc.js │ │ │ ├── aspectj.d.ts │ │ │ ├── aspectj.js │ │ │ ├── autohotkey.d.ts │ │ │ ├── autohotkey.js │ │ │ ├── autoit.d.ts │ │ │ ├── autoit.js │ │ │ ├── avrasm.d.ts │ │ │ ├── avrasm.js │ │ │ ├── awk.d.ts │ │ │ ├── awk.js │ │ │ ├── axapta.d.ts │ │ │ ├── axapta.js │ │ │ ├── bash.d.ts │ │ │ ├── bash.js │ │ │ ├── basic.d.ts │ │ │ ├── basic.js │ │ │ ├── bnf.d.ts │ │ │ ├── bnf.js │ │ │ ├── brainfuck.d.ts │ │ │ ├── brainfuck.js │ │ │ ├── c.d.ts │ │ │ ├── c.js │ │ │ ├── cal.d.ts │ │ │ ├── cal.js │ │ │ ├── capnproto.d.ts │ │ │ ├── capnproto.js │ │ │ ├── ceylon.d.ts │ │ │ ├── ceylon.js │ │ │ ├── clean.d.ts │ │ │ ├── clean.js │ │ │ ├── clojure-repl.d.ts │ │ │ ├── clojure-repl.js │ │ │ ├── clojure.d.ts │ │ │ ├── clojure.js │ │ │ ├── cmake.d.ts │ │ │ ├── cmake.js │ │ │ ├── coffeescript.d.ts │ │ │ ├── coffeescript.js │ │ │ ├── coq.d.ts │ │ │ ├── coq.js │ │ │ ├── cos.d.ts │ │ │ ├── cos.js │ │ │ ├── cpp.d.ts │ │ │ ├── cpp.js │ │ │ ├── crmsh.d.ts │ │ │ ├── crmsh.js │ │ │ ├── crystal.d.ts │ │ │ ├── crystal.js │ │ │ ├── csharp.d.ts │ │ │ ├── csharp.js │ │ │ ├── csp.d.ts │ │ │ ├── csp.js │ │ │ ├── css.d.ts │ │ │ ├── css.js │ │ │ ├── d.d.ts │ │ │ ├── d.js │ │ │ ├── dart.d.ts │ │ │ ├── dart.js │ │ │ ├── delphi.d.ts │ │ │ ├── delphi.js │ │ │ ├── diff.d.ts │ │ │ ├── diff.js │ │ │ ├── django.d.ts │ │ │ ├── django.js │ │ │ ├── dns.d.ts │ │ │ ├── dns.js │ │ │ ├── dockerfile.d.ts │ │ │ ├── dockerfile.js │ │ │ ├── dos.d.ts │ │ │ ├── dos.js │ │ │ ├── dsconfig.d.ts │ │ │ ├── dsconfig.js │ │ │ ├── dts.d.ts │ │ │ ├── dts.js │ │ │ ├── dust.d.ts │ │ │ ├── dust.js │ │ │ ├── ebnf.d.ts │ │ │ ├── ebnf.js │ │ │ ├── elixir.d.ts │ │ │ ├── elixir.js │ │ │ ├── elm.d.ts │ │ │ ├── elm.js │ │ │ ├── erb.d.ts │ │ │ ├── erb.js │ │ │ ├── erlang-repl.d.ts │ │ │ ├── erlang-repl.js │ │ │ ├── erlang.d.ts │ │ │ ├── erlang.js │ │ │ ├── excel.d.ts │ │ │ ├── excel.js │ │ │ ├── fix.d.ts │ │ │ ├── fix.js │ │ │ ├── flix.d.ts │ │ │ ├── flix.js │ │ │ ├── fortran.d.ts │ │ │ ├── fortran.js │ │ │ ├── fsharp.d.ts │ │ │ ├── fsharp.js │ │ │ ├── gams.d.ts │ │ │ ├── gams.js │ │ │ ├── gauss.d.ts │ │ │ ├── gauss.js │ │ │ ├── gcode.d.ts │ │ │ ├── gcode.js │ │ │ ├── gherkin.d.ts │ │ │ ├── gherkin.js │ │ │ ├── glsl.d.ts │ │ │ ├── glsl.js │ │ │ ├── gml.d.ts │ │ │ ├── gml.js │ │ │ ├── go.d.ts │ │ │ ├── go.js │ │ │ ├── golo.d.ts │ │ │ ├── golo.js │ │ │ ├── gradle.d.ts │ │ │ ├── gradle.js │ │ │ ├── graphql.d.ts │ │ │ ├── graphql.js │ │ │ ├── groovy.d.ts │ │ │ ├── groovy.js │ │ │ ├── haml.d.ts │ │ │ ├── haml.js │ │ │ ├── handlebars.d.ts │ │ │ ├── handlebars.js │ │ │ ├── haskell.d.ts │ │ │ ├── haskell.js │ │ │ ├── haxe.d.ts │ │ │ ├── haxe.js │ │ │ ├── hsp.d.ts │ │ │ ├── hsp.js │ │ │ ├── http.d.ts │ │ │ ├── http.js │ │ │ ├── hy.d.ts │ │ │ ├── hy.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── inform7.d.ts │ │ │ ├── inform7.js │ │ │ ├── ini.d.ts │ │ │ ├── ini.js │ │ │ ├── irpf90.d.ts │ │ │ ├── irpf90.js │ │ │ ├── isbl.d.ts │ │ │ ├── isbl.js │ │ │ ├── java.d.ts │ │ │ ├── java.js │ │ │ ├── javascript.d.ts │ │ │ ├── javascript.js │ │ │ ├── jboss-cli.d.ts │ │ │ ├── jboss-cli.js │ │ │ ├── json.d.ts │ │ │ ├── json.js │ │ │ ├── julia-repl.d.ts │ │ │ ├── julia-repl.js │ │ │ ├── julia.d.ts │ │ │ ├── julia.js │ │ │ ├── kotlin.d.ts │ │ │ ├── kotlin.js │ │ │ ├── lasso.d.ts │ │ │ ├── lasso.js │ │ │ ├── latex.d.ts │ │ │ ├── latex.js │ │ │ ├── ldif.d.ts │ │ │ ├── ldif.js │ │ │ ├── leaf.d.ts │ │ │ ├── leaf.js │ │ │ ├── less.d.ts │ │ │ ├── less.js │ │ │ ├── lisp.d.ts │ │ │ ├── lisp.js │ │ │ ├── livecodeserver.d.ts │ │ │ ├── livecodeserver.js │ │ │ ├── livescript.d.ts │ │ │ ├── livescript.js │ │ │ ├── llvm.d.ts │ │ │ ├── llvm.js │ │ │ ├── lsl.d.ts │ │ │ ├── lsl.js │ │ │ ├── lua.d.ts │ │ │ ├── lua.js │ │ │ ├── makefile.d.ts │ │ │ ├── makefile.js │ │ │ ├── markdown.d.ts │ │ │ ├── markdown.js │ │ │ ├── mathematica.d.ts │ │ │ ├── mathematica.js │ │ │ ├── matlab.d.ts │ │ │ ├── matlab.js │ │ │ ├── maxima.d.ts │ │ │ ├── maxima.js │ │ │ ├── mel.d.ts │ │ │ ├── mel.js │ │ │ ├── mercury.d.ts │ │ │ ├── mercury.js │ │ │ ├── mipsasm.d.ts │ │ │ ├── mipsasm.js │ │ │ ├── mizar.d.ts │ │ │ ├── mizar.js │ │ │ ├── mojolicious.d.ts │ │ │ ├── mojolicious.js │ │ │ ├── monkey.d.ts │ │ │ ├── monkey.js │ │ │ ├── moonscript.d.ts │ │ │ ├── moonscript.js │ │ │ ├── n1ql.d.ts │ │ │ ├── n1ql.js │ │ │ ├── nestedtext.d.ts │ │ │ ├── nestedtext.js │ │ │ ├── nginx.d.ts │ │ │ ├── nginx.js │ │ │ ├── nim.d.ts │ │ │ ├── nim.js │ │ │ ├── nix.d.ts │ │ │ ├── nix.js │ │ │ ├── node-repl.d.ts │ │ │ ├── node-repl.js │ │ │ ├── nsis.d.ts │ │ │ ├── nsis.js │ │ │ ├── objectivec.d.ts │ │ │ ├── objectivec.js │ │ │ ├── ocaml.d.ts │ │ │ ├── ocaml.js │ │ │ ├── openscad.d.ts │ │ │ ├── openscad.js │ │ │ ├── oxygene.d.ts │ │ │ ├── oxygene.js │ │ │ ├── parser3.d.ts │ │ │ ├── parser3.js │ │ │ ├── perl.d.ts │ │ │ ├── perl.js │ │ │ ├── pf.d.ts │ │ │ ├── pf.js │ │ │ ├── pgsql.d.ts │ │ │ ├── pgsql.js │ │ │ ├── php-template.d.ts │ │ │ ├── php-template.js │ │ │ ├── php.d.ts │ │ │ ├── php.js │ │ │ ├── plaintext.d.ts │ │ │ ├── plaintext.js │ │ │ ├── pony.d.ts │ │ │ ├── pony.js │ │ │ ├── powershell.d.ts │ │ │ ├── powershell.js │ │ │ ├── processing.d.ts │ │ │ ├── processing.js │ │ │ ├── profile.d.ts │ │ │ ├── profile.js │ │ │ ├── prolog.d.ts │ │ │ ├── prolog.js │ │ │ ├── properties.d.ts │ │ │ ├── properties.js │ │ │ ├── protobuf.d.ts │ │ │ ├── protobuf.js │ │ │ ├── puppet.d.ts │ │ │ ├── puppet.js │ │ │ ├── purebasic.d.ts │ │ │ ├── purebasic.js │ │ │ ├── python-repl.d.ts │ │ │ ├── python-repl.js │ │ │ ├── python.d.ts │ │ │ ├── python.js │ │ │ ├── q.d.ts │ │ │ ├── q.js │ │ │ ├── qml.d.ts │ │ │ ├── qml.js │ │ │ ├── r.d.ts │ │ │ ├── r.js │ │ │ ├── reasonml.d.ts │ │ │ ├── reasonml.js │ │ │ ├── rib.d.ts │ │ │ ├── rib.js │ │ │ ├── roboconf.d.ts │ │ │ ├── roboconf.js │ │ │ ├── routeros.d.ts │ │ │ ├── routeros.js │ │ │ ├── rsl.d.ts │ │ │ ├── rsl.js │ │ │ ├── ruby.d.ts │ │ │ ├── ruby.js │ │ │ ├── ruleslanguage.d.ts │ │ │ ├── ruleslanguage.js │ │ │ ├── rust.d.ts │ │ │ ├── rust.js │ │ │ ├── sas.d.ts │ │ │ ├── sas.js │ │ │ ├── scala.d.ts │ │ │ ├── scala.js │ │ │ ├── scheme.d.ts │ │ │ ├── scheme.js │ │ │ ├── scilab.d.ts │ │ │ ├── scilab.js │ │ │ ├── scss.d.ts │ │ │ ├── scss.js │ │ │ ├── shell.d.ts │ │ │ ├── shell.js │ │ │ ├── smali.d.ts │ │ │ ├── smali.js │ │ │ ├── smalltalk.d.ts │ │ │ ├── smalltalk.js │ │ │ ├── sml.d.ts │ │ │ ├── sml.js │ │ │ ├── sqf.d.ts │ │ │ ├── sqf.js │ │ │ ├── sql.d.ts │ │ │ ├── sql.js │ │ │ ├── stan.d.ts │ │ │ ├── stan.js │ │ │ ├── stata.d.ts │ │ │ ├── stata.js │ │ │ ├── step21.d.ts │ │ │ ├── step21.js │ │ │ ├── stylus.d.ts │ │ │ ├── stylus.js │ │ │ ├── subunit.d.ts │ │ │ ├── subunit.js │ │ │ ├── swift.d.ts │ │ │ ├── swift.js │ │ │ ├── taggerscript.d.ts │ │ │ ├── taggerscript.js │ │ │ ├── tap.d.ts │ │ │ ├── tap.js │ │ │ ├── tcl.d.ts │ │ │ ├── tcl.js │ │ │ ├── thrift.d.ts │ │ │ ├── thrift.js │ │ │ ├── tp.d.ts │ │ │ ├── tp.js │ │ │ ├── twig.d.ts │ │ │ ├── twig.js │ │ │ ├── typescript.d.ts │ │ │ ├── typescript.js │ │ │ ├── vala.d.ts │ │ │ ├── vala.js │ │ │ ├── vbnet.d.ts │ │ │ ├── vbnet.js │ │ │ ├── vbscript-html.d.ts │ │ │ ├── vbscript-html.js │ │ │ ├── vbscript.d.ts │ │ │ ├── vbscript.js │ │ │ ├── verilog.d.ts │ │ │ ├── verilog.js │ │ │ ├── vhdl.d.ts │ │ │ ├── vhdl.js │ │ │ ├── vim.d.ts │ │ │ ├── vim.js │ │ │ ├── wasm.d.ts │ │ │ ├── wasm.js │ │ │ ├── wren.d.ts │ │ │ ├── wren.js │ │ │ ├── x86asm.d.ts │ │ │ ├── x86asm.js │ │ │ ├── xl.d.ts │ │ │ ├── xl.js │ │ │ ├── xml.d.ts │ │ │ ├── xml.js │ │ │ ├── xquery.d.ts │ │ │ ├── xquery.js │ │ │ ├── yaml.d.ts │ │ │ ├── yaml.js │ │ │ ├── zephir.d.ts │ │ │ └── zephir.js │ │ ├── styles/ │ │ │ ├── 3024.css │ │ │ ├── 3024.d.ts │ │ │ ├── 3024.js │ │ │ ├── a11y-dark.css │ │ │ ├── a11y-dark.d.ts │ │ │ ├── a11y-dark.js │ │ │ ├── a11y-light.css │ │ │ ├── a11y-light.d.ts │ │ │ ├── a11y-light.js │ │ │ ├── agate.css │ │ │ ├── agate.d.ts │ │ │ ├── agate.js │ │ │ ├── an-old-hope.css │ │ │ ├── an-old-hope.d.ts │ │ │ ├── an-old-hope.js │ │ │ ├── androidstudio.css │ │ │ ├── androidstudio.d.ts │ │ │ ├── androidstudio.js │ │ │ ├── apathy.css │ │ │ ├── apathy.d.ts │ │ │ ├── apathy.js │ │ │ ├── apprentice.css │ │ │ ├── apprentice.d.ts │ │ │ ├── apprentice.js │ │ │ ├── arduino-light.css │ │ │ ├── arduino-light.d.ts │ │ │ ├── arduino-light.js │ │ │ ├── arta.css │ │ │ ├── arta.d.ts │ │ │ ├── arta.js │ │ │ ├── ascetic.css │ │ │ ├── ascetic.d.ts │ │ │ ├── ascetic.js │ │ │ ├── ashes.css │ │ │ ├── ashes.d.ts │ │ │ ├── ashes.js │ │ │ ├── atelier-cave-light.css │ │ │ ├── atelier-cave-light.d.ts │ │ │ ├── atelier-cave-light.js │ │ │ ├── atelier-cave.css │ │ │ ├── atelier-cave.d.ts │ │ │ ├── atelier-cave.js │ │ │ ├── atelier-dune-light.css │ │ │ ├── atelier-dune-light.d.ts │ │ │ ├── atelier-dune-light.js │ │ │ ├── atelier-dune.css │ │ │ ├── atelier-dune.d.ts │ │ │ ├── atelier-dune.js │ │ │ ├── atelier-estuary-light.css │ │ │ ├── atelier-estuary-light.d.ts │ │ │ ├── atelier-estuary-light.js │ │ │ ├── atelier-estuary.css │ │ │ ├── atelier-estuary.d.ts │ │ │ ├── atelier-estuary.js │ │ │ ├── atelier-forest-light.css │ │ │ ├── atelier-forest-light.d.ts │ │ │ ├── atelier-forest-light.js │ │ │ ├── atelier-forest.css │ │ │ ├── atelier-forest.d.ts │ │ │ ├── atelier-forest.js │ │ │ ├── atelier-heath-light.css │ │ │ ├── atelier-heath-light.d.ts │ │ │ ├── atelier-heath-light.js │ │ │ ├── atelier-heath.css │ │ │ ├── atelier-heath.d.ts │ │ │ ├── atelier-heath.js │ │ │ ├── atelier-lakeside-light.css │ │ │ ├── atelier-lakeside-light.d.ts │ │ │ ├── atelier-lakeside-light.js │ │ │ ├── atelier-lakeside.css │ │ │ ├── atelier-lakeside.d.ts │ │ │ ├── atelier-lakeside.js │ │ │ ├── atelier-plateau-light.css │ │ │ ├── atelier-plateau-light.d.ts │ │ │ ├── atelier-plateau-light.js │ │ │ ├── atelier-plateau.css │ │ │ ├── atelier-plateau.d.ts │ │ │ ├── atelier-plateau.js │ │ │ ├── atelier-savanna-light.css │ │ │ ├── atelier-savanna-light.d.ts │ │ │ ├── atelier-savanna-light.js │ │ │ ├── atelier-savanna.css │ │ │ ├── atelier-savanna.d.ts │ │ │ ├── atelier-savanna.js │ │ │ ├── atelier-seaside-light.css │ │ │ ├── atelier-seaside-light.d.ts │ │ │ ├── atelier-seaside-light.js │ │ │ ├── atelier-seaside.css │ │ │ ├── atelier-seaside.d.ts │ │ │ ├── atelier-seaside.js │ │ │ ├── atelier-sulphurpool-light.css │ │ │ ├── atelier-sulphurpool-light.d.ts │ │ │ ├── atelier-sulphurpool-light.js │ │ │ ├── atelier-sulphurpool.css │ │ │ ├── atelier-sulphurpool.d.ts │ │ │ ├── atelier-sulphurpool.js │ │ │ ├── atlas.css │ │ │ ├── atlas.d.ts │ │ │ ├── atlas.js │ │ │ ├── atom-one-dark-reasonable.css │ │ │ ├── atom-one-dark-reasonable.d.ts │ │ │ ├── atom-one-dark-reasonable.js │ │ │ ├── atom-one-dark.css │ │ │ ├── atom-one-dark.d.ts │ │ │ ├── atom-one-dark.js │ │ │ ├── atom-one-light.css │ │ │ ├── atom-one-light.d.ts │ │ │ ├── atom-one-light.js │ │ │ ├── base16-github.css │ │ │ ├── base16-github.d.ts │ │ │ ├── base16-github.js │ │ │ ├── base16-ir-black.css │ │ │ ├── base16-ir-black.d.ts │ │ │ ├── base16-ir-black.js │ │ │ ├── base16-monokai.css │ │ │ ├── base16-monokai.d.ts │ │ │ ├── base16-monokai.js │ │ │ ├── base16-nord.css │ │ │ ├── base16-nord.d.ts │ │ │ ├── base16-nord.js │ │ │ ├── bespin.css │ │ │ ├── bespin.d.ts │ │ │ ├── bespin.js │ │ │ ├── black-metal-bathory.css │ │ │ ├── black-metal-bathory.d.ts │ │ │ ├── black-metal-bathory.js │ │ │ ├── black-metal-burzum.css │ │ │ ├── black-metal-burzum.d.ts │ │ │ ├── black-metal-burzum.js │ │ │ ├── black-metal-dark-funeral.css │ │ │ ├── black-metal-dark-funeral.d.ts │ │ │ ├── black-metal-dark-funeral.js │ │ │ ├── black-metal-gorgoroth.css │ │ │ ├── black-metal-gorgoroth.d.ts │ │ │ ├── black-metal-gorgoroth.js │ │ │ ├── black-metal-immortal.css │ │ │ ├── black-metal-immortal.d.ts │ │ │ ├── black-metal-immortal.js │ │ │ ├── black-metal-khold.css │ │ │ ├── black-metal-khold.d.ts │ │ │ ├── black-metal-khold.js │ │ │ ├── black-metal-marduk.css │ │ │ ├── black-metal-marduk.d.ts │ │ │ ├── black-metal-marduk.js │ │ │ ├── black-metal-mayhem.css │ │ │ ├── black-metal-mayhem.d.ts │ │ │ ├── black-metal-mayhem.js │ │ │ ├── black-metal-nile.css │ │ │ ├── black-metal-nile.d.ts │ │ │ ├── black-metal-nile.js │ │ │ ├── black-metal-venom.css │ │ │ ├── black-metal-venom.d.ts │ │ │ ├── black-metal-venom.js │ │ │ ├── black-metal.css │ │ │ ├── black-metal.d.ts │ │ │ ├── black-metal.js │ │ │ ├── brewer.css │ │ │ ├── brewer.d.ts │ │ │ ├── brewer.js │ │ │ ├── bright.css │ │ │ ├── bright.d.ts │ │ │ ├── bright.js │ │ │ ├── brogrammer.css │ │ │ ├── brogrammer.d.ts │ │ │ ├── brogrammer.js │ │ │ ├── brown-paper.css │ │ │ ├── brown-paper.d.ts │ │ │ ├── brown-paper.js │ │ │ ├── brush-trees-dark.css │ │ │ ├── brush-trees-dark.d.ts │ │ │ ├── brush-trees-dark.js │ │ │ ├── brush-trees.css │ │ │ ├── brush-trees.d.ts │ │ │ ├── brush-trees.js │ │ │ ├── chalk.css │ │ │ ├── chalk.d.ts │ │ │ ├── chalk.js │ │ │ ├── circus.css │ │ │ ├── circus.d.ts │ │ │ ├── circus.js │ │ │ ├── classic-dark.css │ │ │ ├── classic-dark.d.ts │ │ │ ├── classic-dark.js │ │ │ ├── classic-light.css │ │ │ ├── classic-light.d.ts │ │ │ ├── classic-light.js │ │ │ ├── codepen-embed.css │ │ │ ├── codepen-embed.d.ts │ │ │ ├── codepen-embed.js │ │ │ ├── codeschool.css │ │ │ ├── codeschool.d.ts │ │ │ ├── codeschool.js │ │ │ ├── color-brewer.css │ │ │ ├── color-brewer.d.ts │ │ │ ├── color-brewer.js │ │ │ ├── colors.css │ │ │ ├── colors.d.ts │ │ │ ├── colors.js │ │ │ ├── cupcake.css │ │ │ ├── cupcake.d.ts │ │ │ ├── cupcake.js │ │ │ ├── cupertino.css │ │ │ ├── cupertino.d.ts │ │ │ ├── cupertino.js │ │ │ ├── danqing.css │ │ │ ├── danqing.d.ts │ │ │ ├── danqing.js │ │ │ ├── darcula.css │ │ │ ├── darcula.d.ts │ │ │ ├── darcula.js │ │ │ ├── dark-violet.css │ │ │ ├── dark-violet.d.ts │ │ │ ├── dark-violet.js │ │ │ ├── dark.css │ │ │ ├── dark.d.ts │ │ │ ├── dark.js │ │ │ ├── darkmoss.css │ │ │ ├── darkmoss.d.ts │ │ │ ├── darkmoss.js │ │ │ ├── darktooth.css │ │ │ ├── darktooth.d.ts │ │ │ ├── darktooth.js │ │ │ ├── decaf.css │ │ │ ├── decaf.d.ts │ │ │ ├── decaf.js │ │ │ ├── default-dark.css │ │ │ ├── default-dark.d.ts │ │ │ ├── default-dark.js │ │ │ ├── default-light.css │ │ │ ├── default-light.d.ts │ │ │ ├── default-light.js │ │ │ ├── default.css │ │ │ ├── default.d.ts │ │ │ ├── default.js │ │ │ ├── devibeans.css │ │ │ ├── devibeans.d.ts │ │ │ ├── devibeans.js │ │ │ ├── dirtysea.css │ │ │ ├── dirtysea.d.ts │ │ │ ├── dirtysea.js │ │ │ ├── docco.css │ │ │ ├── docco.d.ts │ │ │ ├── docco.js │ │ │ ├── dracula.css │ │ │ ├── dracula.d.ts │ │ │ ├── dracula.js │ │ │ ├── edge-dark.css │ │ │ ├── edge-dark.d.ts │ │ │ ├── edge-dark.js │ │ │ ├── edge-light.css │ │ │ ├── edge-light.d.ts │ │ │ ├── edge-light.js │ │ │ ├── eighties.css │ │ │ ├── eighties.d.ts │ │ │ ├── eighties.js │ │ │ ├── embers.css │ │ │ ├── embers.d.ts │ │ │ ├── embers.js │ │ │ ├── equilibrium-dark.css │ │ │ ├── equilibrium-dark.d.ts │ │ │ ├── equilibrium-dark.js │ │ │ ├── equilibrium-gray-dark.css │ │ │ ├── equilibrium-gray-dark.d.ts │ │ │ ├── equilibrium-gray-dark.js │ │ │ ├── equilibrium-gray-light.css │ │ │ ├── equilibrium-gray-light.d.ts │ │ │ ├── equilibrium-gray-light.js │ │ │ ├── equilibrium-light.css │ │ │ ├── equilibrium-light.d.ts │ │ │ ├── equilibrium-light.js │ │ │ ├── espresso.css │ │ │ ├── espresso.d.ts │ │ │ ├── espresso.js │ │ │ ├── eva-dim.css │ │ │ ├── eva-dim.d.ts │ │ │ ├── eva-dim.js │ │ │ ├── eva.css │ │ │ ├── eva.d.ts │ │ │ ├── eva.js │ │ │ ├── far.css │ │ │ ├── far.d.ts │ │ │ ├── far.js │ │ │ ├── felipec.css │ │ │ ├── felipec.d.ts │ │ │ ├── felipec.js │ │ │ ├── flat.css │ │ │ ├── flat.d.ts │ │ │ ├── flat.js │ │ │ ├── foundation.css │ │ │ ├── foundation.d.ts │ │ │ ├── foundation.js │ │ │ ├── framer.css │ │ │ ├── framer.d.ts │ │ │ ├── framer.js │ │ │ ├── fruit-soda.css │ │ │ ├── fruit-soda.d.ts │ │ │ ├── fruit-soda.js │ │ │ ├── gigavolt.css │ │ │ ├── gigavolt.d.ts │ │ │ ├── gigavolt.js │ │ │ ├── github-dark-dimmed.css │ │ │ ├── github-dark-dimmed.d.ts │ │ │ ├── github-dark-dimmed.js │ │ │ ├── github-dark.css │ │ │ ├── github-dark.d.ts │ │ │ ├── github-dark.js │ │ │ ├── github.css │ │ │ ├── github.d.ts │ │ │ ├── github.js │ │ │ ├── gml.css │ │ │ ├── gml.d.ts │ │ │ ├── gml.js │ │ │ ├── google-dark.css │ │ │ ├── google-dark.d.ts │ │ │ ├── google-dark.js │ │ │ ├── google-light.css │ │ │ ├── google-light.d.ts │ │ │ ├── google-light.js │ │ │ ├── googlecode.css │ │ │ ├── googlecode.d.ts │ │ │ ├── googlecode.js │ │ │ ├── gradient-dark.css │ │ │ ├── gradient-dark.d.ts │ │ │ ├── gradient-dark.js │ │ │ ├── gradient-light.css │ │ │ ├── gradient-light.d.ts │ │ │ ├── gradient-light.js │ │ │ ├── grayscale-dark.css │ │ │ ├── grayscale-dark.d.ts │ │ │ ├── grayscale-dark.js │ │ │ ├── grayscale-light.css │ │ │ ├── grayscale-light.d.ts │ │ │ ├── grayscale-light.js │ │ │ ├── grayscale.css │ │ │ ├── grayscale.d.ts │ │ │ ├── grayscale.js │ │ │ ├── green-screen.css │ │ │ ├── green-screen.d.ts │ │ │ ├── green-screen.js │ │ │ ├── gruvbox-dark-hard.css │ │ │ ├── gruvbox-dark-hard.d.ts │ │ │ ├── gruvbox-dark-hard.js │ │ │ ├── gruvbox-dark-medium.css │ │ │ ├── gruvbox-dark-medium.d.ts │ │ │ ├── gruvbox-dark-medium.js │ │ │ ├── gruvbox-dark-pale.css │ │ │ ├── gruvbox-dark-pale.d.ts │ │ │ ├── gruvbox-dark-pale.js │ │ │ ├── gruvbox-dark-soft.css │ │ │ ├── gruvbox-dark-soft.d.ts │ │ │ ├── gruvbox-dark-soft.js │ │ │ ├── gruvbox-light-hard.css │ │ │ ├── gruvbox-light-hard.d.ts │ │ │ ├── gruvbox-light-hard.js │ │ │ ├── gruvbox-light-medium.css │ │ │ ├── gruvbox-light-medium.d.ts │ │ │ ├── gruvbox-light-medium.js │ │ │ ├── gruvbox-light-soft.css │ │ │ ├── gruvbox-light-soft.d.ts │ │ │ ├── gruvbox-light-soft.js │ │ │ ├── hardcore.css │ │ │ ├── hardcore.d.ts │ │ │ ├── hardcore.js │ │ │ ├── harmonic16-dark.css │ │ │ ├── harmonic16-dark.d.ts │ │ │ ├── harmonic16-dark.js │ │ │ ├── harmonic16-light.css │ │ │ ├── harmonic16-light.d.ts │ │ │ ├── harmonic16-light.js │ │ │ ├── heetch-dark.css │ │ │ ├── heetch-dark.d.ts │ │ │ ├── heetch-dark.js │ │ │ ├── heetch-light.css │ │ │ ├── heetch-light.d.ts │ │ │ ├── heetch-light.js │ │ │ ├── helios.css │ │ │ ├── helios.d.ts │ │ │ ├── helios.js │ │ │ ├── hopscotch.css │ │ │ ├── hopscotch.d.ts │ │ │ ├── hopscotch.js │ │ │ ├── horizon-dark.css │ │ │ ├── horizon-dark.d.ts │ │ │ ├── horizon-dark.js │ │ │ ├── horizon-light.css │ │ │ ├── horizon-light.d.ts │ │ │ ├── horizon-light.js │ │ │ ├── humanoid-dark.css │ │ │ ├── humanoid-dark.d.ts │ │ │ ├── humanoid-dark.js │ │ │ ├── humanoid-light.css │ │ │ ├── humanoid-light.d.ts │ │ │ ├── humanoid-light.js │ │ │ ├── hybrid.css │ │ │ ├── hybrid.d.ts │ │ │ ├── hybrid.js │ │ │ ├── ia-dark.css │ │ │ ├── ia-dark.d.ts │ │ │ ├── ia-dark.js │ │ │ ├── ia-light.css │ │ │ ├── ia-light.d.ts │ │ │ ├── ia-light.js │ │ │ ├── icy-dark.css │ │ │ ├── icy-dark.d.ts │ │ │ ├── icy-dark.js │ │ │ ├── idea.css │ │ │ ├── idea.d.ts │ │ │ ├── idea.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── intellij-light.css │ │ │ ├── intellij-light.d.ts │ │ │ ├── intellij-light.js │ │ │ ├── ir-black.css │ │ │ ├── ir-black.d.ts │ │ │ ├── ir-black.js │ │ │ ├── isbl-editor-dark.css │ │ │ ├── isbl-editor-dark.d.ts │ │ │ ├── isbl-editor-dark.js │ │ │ ├── isbl-editor-light.css │ │ │ ├── isbl-editor-light.d.ts │ │ │ ├── isbl-editor-light.js │ │ │ ├── isotope.css │ │ │ ├── isotope.d.ts │ │ │ ├── isotope.js │ │ │ ├── kimber.css │ │ │ ├── kimber.d.ts │ │ │ ├── kimber.js │ │ │ ├── kimbie-dark.css │ │ │ ├── kimbie-dark.d.ts │ │ │ ├── kimbie-dark.js │ │ │ ├── kimbie-light.css │ │ │ ├── kimbie-light.d.ts │ │ │ ├── kimbie-light.js │ │ │ ├── lightfair.css │ │ │ ├── lightfair.d.ts │ │ │ ├── lightfair.js │ │ │ ├── lioshi.css │ │ │ ├── lioshi.d.ts │ │ │ ├── lioshi.js │ │ │ ├── london-tube.css │ │ │ ├── london-tube.d.ts │ │ │ ├── london-tube.js │ │ │ ├── macintosh.css │ │ │ ├── macintosh.d.ts │ │ │ ├── macintosh.js │ │ │ ├── magula.css │ │ │ ├── magula.d.ts │ │ │ ├── magula.js │ │ │ ├── marrakesh.css │ │ │ ├── marrakesh.d.ts │ │ │ ├── marrakesh.js │ │ │ ├── materia.css │ │ │ ├── materia.d.ts │ │ │ ├── materia.js │ │ │ ├── material-darker.css │ │ │ ├── material-darker.d.ts │ │ │ ├── material-darker.js │ │ │ ├── material-lighter.css │ │ │ ├── material-lighter.d.ts │ │ │ ├── material-lighter.js │ │ │ ├── material-palenight.css │ │ │ ├── material-palenight.d.ts │ │ │ ├── material-palenight.js │ │ │ ├── material-vivid.css │ │ │ ├── material-vivid.d.ts │ │ │ ├── material-vivid.js │ │ │ ├── material.css │ │ │ ├── material.d.ts │ │ │ ├── material.js │ │ │ ├── mellow-purple.css │ │ │ ├── mellow-purple.d.ts │ │ │ ├── mellow-purple.js │ │ │ ├── mexico-light.css │ │ │ ├── mexico-light.d.ts │ │ │ ├── mexico-light.js │ │ │ ├── mocha.css │ │ │ ├── mocha.d.ts │ │ │ ├── mocha.js │ │ │ ├── mono-blue.css │ │ │ ├── mono-blue.d.ts │ │ │ ├── mono-blue.js │ │ │ ├── monokai-sublime.css │ │ │ ├── monokai-sublime.d.ts │ │ │ ├── monokai-sublime.js │ │ │ ├── monokai.css │ │ │ ├── monokai.d.ts │ │ │ ├── monokai.js │ │ │ ├── nebula.css │ │ │ ├── nebula.d.ts │ │ │ ├── nebula.js │ │ │ ├── night-owl.css │ │ │ ├── night-owl.d.ts │ │ │ ├── night-owl.js │ │ │ ├── nnfx-dark.css │ │ │ ├── nnfx-dark.d.ts │ │ │ ├── nnfx-dark.js │ │ │ ├── nnfx-light.css │ │ │ ├── nnfx-light.d.ts │ │ │ ├── nnfx-light.js │ │ │ ├── nord.css │ │ │ ├── nord.d.ts │ │ │ ├── nord.js │ │ │ ├── nova.css │ │ │ ├── nova.d.ts │ │ │ ├── nova.js │ │ │ ├── obsidian.css │ │ │ ├── obsidian.d.ts │ │ │ ├── obsidian.js │ │ │ ├── ocean.css │ │ │ ├── ocean.d.ts │ │ │ ├── ocean.js │ │ │ ├── oceanicnext.css │ │ │ ├── oceanicnext.d.ts │ │ │ ├── oceanicnext.js │ │ │ ├── one-light.css │ │ │ ├── one-light.d.ts │ │ │ ├── one-light.js │ │ │ ├── onedark.css │ │ │ ├── onedark.d.ts │ │ │ ├── onedark.js │ │ │ ├── outrun-dark.css │ │ │ ├── outrun-dark.d.ts │ │ │ ├── outrun-dark.js │ │ │ ├── panda-syntax-dark.css │ │ │ ├── panda-syntax-dark.d.ts │ │ │ ├── panda-syntax-dark.js │ │ │ ├── panda-syntax-light.css │ │ │ ├── panda-syntax-light.d.ts │ │ │ ├── panda-syntax-light.js │ │ │ ├── papercolor-dark.css │ │ │ ├── papercolor-dark.d.ts │ │ │ ├── papercolor-dark.js │ │ │ ├── papercolor-light.css │ │ │ ├── papercolor-light.d.ts │ │ │ ├── papercolor-light.js │ │ │ ├── paraiso-dark.css │ │ │ ├── paraiso-dark.d.ts │ │ │ ├── paraiso-dark.js │ │ │ ├── paraiso-light.css │ │ │ ├── paraiso-light.d.ts │ │ │ ├── paraiso-light.js │ │ │ ├── paraiso.css │ │ │ ├── paraiso.d.ts │ │ │ ├── paraiso.js │ │ │ ├── pasque.css │ │ │ ├── pasque.d.ts │ │ │ ├── pasque.js │ │ │ ├── phd.css │ │ │ ├── phd.d.ts │ │ │ ├── phd.js │ │ │ ├── pico.css │ │ │ ├── pico.d.ts │ │ │ ├── pico.js │ │ │ ├── pojoaque.css │ │ │ ├── pojoaque.d.ts │ │ │ ├── pojoaque.js │ │ │ ├── pop.css │ │ │ ├── pop.d.ts │ │ │ ├── pop.js │ │ │ ├── porple.css │ │ │ ├── porple.d.ts │ │ │ ├── porple.js │ │ │ ├── purebasic.css │ │ │ ├── purebasic.d.ts │ │ │ ├── purebasic.js │ │ │ ├── qtcreator-dark.css │ │ │ ├── qtcreator-dark.d.ts │ │ │ ├── qtcreator-dark.js │ │ │ ├── qtcreator-light.css │ │ │ ├── qtcreator-light.d.ts │ │ │ ├── qtcreator-light.js │ │ │ ├── qualia.css │ │ │ ├── qualia.d.ts │ │ │ ├── qualia.js │ │ │ ├── railscasts.css │ │ │ ├── railscasts.d.ts │ │ │ ├── railscasts.js │ │ │ ├── rainbow.css │ │ │ ├── rainbow.d.ts │ │ │ ├── rainbow.js │ │ │ ├── rebecca.css │ │ │ ├── rebecca.d.ts │ │ │ ├── rebecca.js │ │ │ ├── ros-pine-dawn.css │ │ │ ├── ros-pine-dawn.d.ts │ │ │ ├── ros-pine-dawn.js │ │ │ ├── ros-pine-moon.css │ │ │ ├── ros-pine-moon.d.ts │ │ │ ├── ros-pine-moon.js │ │ │ ├── ros-pine.css │ │ │ ├── ros-pine.d.ts │ │ │ ├── ros-pine.js │ │ │ ├── routeros.css │ │ │ ├── routeros.d.ts │ │ │ ├── routeros.js │ │ │ ├── sagelight.css │ │ │ ├── sagelight.d.ts │ │ │ ├── sagelight.js │ │ │ ├── sandcastle.css │ │ │ ├── sandcastle.d.ts │ │ │ ├── sandcastle.js │ │ │ ├── school-book.css │ │ │ ├── school-book.d.ts │ │ │ ├── school-book.js │ │ │ ├── seti-ui.css │ │ │ ├── seti-ui.d.ts │ │ │ ├── seti-ui.js │ │ │ ├── shades-of-purple.css │ │ │ ├── shades-of-purple.d.ts │ │ │ ├── shades-of-purple.js │ │ │ ├── shapeshifter.css │ │ │ ├── shapeshifter.d.ts │ │ │ ├── shapeshifter.js │ │ │ ├── silk-dark.css │ │ │ ├── silk-dark.d.ts │ │ │ ├── silk-dark.js │ │ │ ├── silk-light.css │ │ │ ├── silk-light.d.ts │ │ │ ├── silk-light.js │ │ │ ├── snazzy.css │ │ │ ├── snazzy.d.ts │ │ │ ├── snazzy.js │ │ │ ├── solar-flare-light.css │ │ │ ├── solar-flare-light.d.ts │ │ │ ├── solar-flare-light.js │ │ │ ├── solar-flare.css │ │ │ ├── solar-flare.d.ts │ │ │ ├── solar-flare.js │ │ │ ├── solarized-dark.css │ │ │ ├── solarized-dark.d.ts │ │ │ ├── solarized-dark.js │ │ │ ├── solarized-light.css │ │ │ ├── solarized-light.d.ts │ │ │ ├── solarized-light.js │ │ │ ├── spacemacs.css │ │ │ ├── spacemacs.d.ts │ │ │ ├── spacemacs.js │ │ │ ├── srcery.css │ │ │ ├── srcery.d.ts │ │ │ ├── srcery.js │ │ │ ├── stackoverflow-dark.css │ │ │ ├── stackoverflow-dark.d.ts │ │ │ ├── stackoverflow-dark.js │ │ │ ├── stackoverflow-light.css │ │ │ ├── stackoverflow-light.d.ts │ │ │ ├── stackoverflow-light.js │ │ │ ├── summercamp.css │ │ │ ├── summercamp.d.ts │ │ │ ├── summercamp.js │ │ │ ├── summerfruit-dark.css │ │ │ ├── summerfruit-dark.d.ts │ │ │ ├── summerfruit-dark.js │ │ │ ├── summerfruit-light.css │ │ │ ├── summerfruit-light.d.ts │ │ │ ├── summerfruit-light.js │ │ │ ├── sunburst.css │ │ │ ├── sunburst.d.ts │ │ │ ├── sunburst.js │ │ │ ├── synth-midnight-terminal-dark.css │ │ │ ├── synth-midnight-terminal-dark.d.ts │ │ │ ├── synth-midnight-terminal-dark.js │ │ │ ├── synth-midnight-terminal-light.css │ │ │ ├── synth-midnight-terminal-light.d.ts │ │ │ ├── synth-midnight-terminal-light.js │ │ │ ├── tango.css │ │ │ ├── tango.d.ts │ │ │ ├── tango.js │ │ │ ├── tender.css │ │ │ ├── tender.d.ts │ │ │ ├── tender.js │ │ │ ├── tokyo-night-dark.css │ │ │ ├── tokyo-night-dark.d.ts │ │ │ ├── tokyo-night-dark.js │ │ │ ├── tokyo-night-light.css │ │ │ ├── tokyo-night-light.d.ts │ │ │ ├── tokyo-night-light.js │ │ │ ├── tomorrow-night-blue.css │ │ │ ├── tomorrow-night-blue.d.ts │ │ │ ├── tomorrow-night-blue.js │ │ │ ├── tomorrow-night-bright.css │ │ │ ├── tomorrow-night-bright.d.ts │ │ │ ├── tomorrow-night-bright.js │ │ │ ├── tomorrow-night.css │ │ │ ├── tomorrow-night.d.ts │ │ │ ├── tomorrow-night.js │ │ │ ├── tomorrow.css │ │ │ ├── tomorrow.d.ts │ │ │ ├── tomorrow.js │ │ │ ├── twilight.css │ │ │ ├── twilight.d.ts │ │ │ ├── twilight.js │ │ │ ├── unikitty-dark.css │ │ │ ├── unikitty-dark.d.ts │ │ │ ├── unikitty-dark.js │ │ │ ├── unikitty-light.css │ │ │ ├── unikitty-light.d.ts │ │ │ ├── unikitty-light.js │ │ │ ├── vs.css │ │ │ ├── vs.d.ts │ │ │ ├── vs.js │ │ │ ├── vs2015.css │ │ │ ├── vs2015.d.ts │ │ │ ├── vs2015.js │ │ │ ├── vulcan.css │ │ │ ├── vulcan.d.ts │ │ │ ├── vulcan.js │ │ │ ├── windows-10-light.css │ │ │ ├── windows-10-light.d.ts │ │ │ ├── windows-10-light.js │ │ │ ├── windows-10.css │ │ │ ├── windows-10.d.ts │ │ │ ├── windows-10.js │ │ │ ├── windows-95-light.css │ │ │ ├── windows-95-light.d.ts │ │ │ ├── windows-95-light.js │ │ │ ├── windows-95.css │ │ │ ├── windows-95.d.ts │ │ │ ├── windows-95.js │ │ │ ├── windows-high-contrast-light.css │ │ │ ├── windows-high-contrast-light.d.ts │ │ │ ├── windows-high-contrast-light.js │ │ │ ├── windows-high-contrast.css │ │ │ ├── windows-high-contrast.d.ts │ │ │ ├── windows-high-contrast.js │ │ │ ├── windows-nt-light.css │ │ │ ├── windows-nt-light.d.ts │ │ │ ├── windows-nt-light.js │ │ │ ├── windows-nt.css │ │ │ ├── windows-nt.d.ts │ │ │ ├── windows-nt.js │ │ │ ├── woodland.css │ │ │ ├── woodland.d.ts │ │ │ ├── woodland.js │ │ │ ├── xcode-dusk.css │ │ │ ├── xcode-dusk.d.ts │ │ │ ├── xcode-dusk.js │ │ │ ├── xcode.css │ │ │ ├── xcode.d.ts │ │ │ ├── xcode.js │ │ │ ├── xt256.css │ │ │ ├── xt256.d.ts │ │ │ ├── xt256.js │ │ │ ├── zenburn.css │ │ │ ├── zenburn.d.ts │ │ │ └── zenburn.js │ │ ├── themeNames.json │ │ └── themes.css │ ├── icons/ │ │ ├── Angular.svelte │ │ ├── ArrowLeft.svelte │ │ ├── ArrowRight.svelte │ │ ├── Check.svelte │ │ ├── China.svelte │ │ ├── Clipboard.svelte │ │ ├── CoinbaseWallet.svelte │ │ ├── Combinator.svelte │ │ ├── Community.svelte │ │ ├── Dev.svelte │ │ ├── Discord.svelte │ │ ├── Dribble.svelte │ │ ├── Figma.svelte │ │ ├── FlowbiteLogo.svelte │ │ ├── Fortmatic.svelte │ │ ├── Germany.svelte │ │ ├── GitHub.svelte │ │ ├── Hunt.svelte │ │ ├── Italy.svelte │ │ ├── Mail.svelte │ │ ├── MetaMask.svelte │ │ ├── Moon.svelte │ │ ├── Npm.svelte │ │ ├── OperaWallet.svelte │ │ ├── Quote.svelte │ │ ├── React.svelte │ │ ├── Reddit.svelte │ │ ├── Sun.svelte │ │ ├── Usa.svelte │ │ ├── Vue.svelte │ │ ├── WalletConnect.svelte │ │ ├── YouTube.svelte │ │ └── YouTubeFull.svelte │ └── theme.ts ├── svelte.config.js ├── tsconfig.json ├── vercel.json ├── vite.config.ts └── vitest-setup-client.ts
SYMBOL INDEX (276 symbols across 76 files)
FILE: scripts/generateFileList.ts
function walkDir (line 9) | async function walkDir(dir: string): Promise<string[]> {
function generateFileList (line 26) | async function generateFileList() {
FILE: src/lib/accordion/type.ts
type AccordionCtxType (line 5) | interface AccordionCtxType {
type AccordionProps (line 15) | interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
type AccordionItemProps (line 27) | interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/alert/type.ts
type alertColor (line 5) | type alertColor =
type AlertProps (line 27) | interface AlertProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/avatar/type.ts
type AvatarProps (line 4) | interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/badge/type.ts
type BadgeColorType (line 5) | type BadgeColorType =
type BadgeProps (line 27) | interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/banner/type.ts
type ColorVariants (line 5) | type ColorVariants =
type TypeVariants (line 26) | type TypeVariants = 'default' | 'bottom' | 'cta' | 'signup' | 'info';
type PositionVariants (line 27) | type PositionVariants = 'static' | 'fixed' | 'absolute' | 'relative' | '...
type BannerProps (line 29) | interface BannerProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/bottom-navigation/type.ts
type BottomNavVariantType (line 4) | type BottomNavVariantType =
type PositionType (line 14) | type PositionType = 'static' | 'fixed' | 'absolute' | 'relative' | 'stic...
type BottomNavContextType (line 15) | type BottomNavContextType = {
type AppBtnPositionType (line 19) | type AppBtnPositionType = 'middle' | 'left' | 'right' | undefined;
type BottomNavProps (line 20) | interface BottomNavProps extends HTMLAttributes<HTMLDivElement> {
type BaseBottomNavItemProps (line 31) | interface BaseBottomNavItemProps {
type BottomNavItemProps (line 40) | type BottomNavItemProps = BaseBottomNavItemProps &
type BottomNavHeaderProps (line 43) | interface BottomNavHeaderProps {
type BottomNavHeaderItemProps (line 49) | interface BottomNavHeaderItemProps extends HTMLButtonAttributes {
FILE: src/lib/breadcrumb/type.ts
type BreadcrumbProps (line 5) | interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
type BreadcrumbItemProps (line 14) | interface BreadcrumbItemProps extends HTMLLiAttributes {
FILE: src/lib/buttongroup/type.ts
type ButtonGroupProps (line 3) | interface ButtonGroupProps {
type SizeType (line 9) | type SizeType = 'sm' | 'md' | 'lg' | undefined;
FILE: src/lib/buttons/type.ts
type ButtonColorType (line 4) | type ButtonColorType =
type ButtonSizeType (line 28) | type ButtonSizeType = 'sm' | 'md' | 'lg' | 'xl' | 'xs' | undefined;
type HTMLAttributesWithoutAbort (line 30) | type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, 'on:abort'> &
type ButtonProps (line 33) | interface ButtonProps extends HTMLAttributesWithoutAbort {
type GradientButtonColorType (line 47) | type GradientButtonColorType =
type GradientButtonProps (line 65) | interface GradientButtonProps extends HTMLAttributesWithoutAbort {
FILE: src/lib/cards/type.ts
type CardSizeType (line 5) | type CardSizeType = 'sm' | 'md' | 'lg' | 'xl' | 'xs' | undefined;
type PaddingType (line 6) | type PaddingType = 'sm' | 'lg' | 'md' | 'xl' | 'xs' | 'none' | undefined;
type ShadowType (line 7) | type ShadowType = 'sm' | 'normal' | 'lg' | 'md' | 'xl' | '2xl' | 'inner'...
type ColorType (line 8) | type ColorType =
type ImgType (line 31) | type ImgType = {
type BaseCardProps (line 36) | interface BaseCardProps {
type CardProps (line 51) | type CardProps = BaseCardProps &
FILE: src/lib/chart/type.ts
type ChartProps (line 3) | interface ChartProps {
FILE: src/lib/darkmode/type.ts
type DarkmodeProps (line 4) | interface DarkmodeProps extends HTMLButtonAttributes {
FILE: src/lib/device-mockups/type.ts
type DeviceMockupProps (line 5) | interface DeviceMockupProps {
type MockupBaseProps (line 10) | interface MockupBaseProps extends HTMLAttributes<HTMLElement> {
type AndroidProps (line 18) | interface AndroidProps {
type DefaultMockupProps (line 29) | interface DefaultMockupProps {
type IosProps (line 39) | interface IosProps {
type SmartwatchProps (line 49) | interface SmartwatchProps {
type TabletProps (line 59) | interface TabletProps {
FILE: src/lib/drawer/type.ts
type WidthType (line 5) | type WidthType = 'default' | 'full' | 'half' | undefined;
type PlacementType (line 6) | type PlacementType = 'left' | 'right' | 'top' | 'bottom' | undefined;
type PosisionType (line 7) | type PosisionType = 'fixed' | 'absolute' | undefined;
type DrawerProps (line 9) | interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
type DrawerheadProps (line 24) | interface DrawerheadProps extends HTMLButtonAttributes {
FILE: src/lib/dropdown/type.ts
type DropdownProps (line 5) | interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
type DropdownDividerProps (line 20) | interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
type DropdownHeaderProps (line 24) | interface DropdownHeaderProps extends HTMLAttributes<HTMLDivElement> {
type DropdownFooterProps (line 29) | interface DropdownFooterProps extends HTMLAttributes<HTMLDivElement> {
type DropdownLiProps (line 34) | interface DropdownLiProps extends HTMLAnchorAttributes {
type DropdownUlProps (line 42) | interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
FILE: src/lib/footer/type.ts
type FooterType (line 4) | type FooterType = 'default' | 'sticky' | 'sitemap' | 'socialmedia' | 'lo...
type FooterProps (line 5) | interface FooterProps extends HTMLAttributes<HTMLElement> {
type FooterBrandProps (line 11) | interface FooterBrandProps extends HTMLAnchorAttributes {
type FooterCopyrightProps (line 22) | interface FooterCopyrightProps extends HTMLAnchorAttributes {
type FooterIconProps (line 31) | interface FooterIconProps extends HTMLAnchorAttributes {
type FooterUlProps (line 38) | interface FooterUlProps extends HTMLAttributes<HTMLUListElement> {
type FooterLiProps (line 43) | interface FooterLiProps extends HTMLAnchorAttributes {
FILE: src/lib/forms/checkbox-button/type.ts
type CheckboxButtonProps (line 4) | interface CheckboxButtonProps {
FILE: src/lib/forms/checkbox/type.ts
type CheckboxItem (line 4) | type CheckboxItem = {
type ColorType (line 10) | type ColorType =
type CheckboxProps (line 33) | interface CheckboxProps extends HTMLInputAttributes {
FILE: src/lib/forms/dropzone/type.ts
type DropzoneProps (line 4) | interface DropzoneProps extends HTMLInputAttributes {
FILE: src/lib/forms/fileupload/type.ts
type FileuploadProps (line 4) | interface FileuploadProps extends Omit<HTMLInputAttributes, 'size'> {
FILE: src/lib/forms/floating-label-input/type.ts
type FloatingLabelInputProps (line 5) | interface FloatingLabelInputProps extends Omit<HTMLInputAttributes, 'siz...
FILE: src/lib/forms/helper/type.ts
type HelperProps (line 5) | interface HelperProps extends HTMLAttributes<HTMLParagraphElement> {
FILE: src/lib/forms/input-addon/type.ts
type InputAddonProps (line 3) | interface InputAddonProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/forms/input/index.ts
function clampSize (line 6) | function clampSize(s: SizeType) {
FILE: src/lib/forms/input/type.ts
type InputValue (line 5) | type InputValue = string | number | string[] | undefined;
type InputProps (line 6) | interface InputProps<T extends InputValue = string>
FILE: src/lib/forms/label/type.ts
type LabelProps (line 5) | interface LabelProps extends HTMLLabelAttributes {
FILE: src/lib/forms/radio-button/type.ts
type RadioButtonProps (line 5) | interface RadioButtonProps<T> extends HTMLInputAttributes {
FILE: src/lib/forms/radio/type.ts
type RadioColorType (line 4) | type RadioColorType =
type RadioProps (line 27) | interface RadioProps<T> extends HTMLInputAttributes {
FILE: src/lib/forms/range/type.ts
type RangeColorType (line 3) | type RangeColorType =
type AppearanceType (line 14) | type AppearanceType = 'auto' | 'none' | undefined;
type RangeType (line 15) | type RangeType = 'sm' | 'md' | 'lg';
type RangeProps (line 17) | interface RangeProps extends HTMLInputAttributes {
FILE: src/lib/forms/search/type.ts
type SearchProps (line 4) | interface SearchProps<T> extends Omit<HTMLInputAttributes, 'size'> {
FILE: src/lib/forms/select/type.ts
type SelectSize (line 4) | type SelectSize = 'sm' | 'md' | 'lg';
type SelectOptionType (line 6) | type SelectOptionType<T> = {
type SelectProps (line 11) | interface SelectProps<T> extends Omit<HTMLSelectAttributes, 'size'> {
type MultiSelectProps (line 20) | interface MultiSelectProps<T> extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/forms/textarea/type.ts
type TextareaProps (line 4) | interface TextareaProps extends HTMLTextareaAttributes {
FILE: src/lib/forms/toggle/type.ts
type SizeType (line 4) | type SizeType = 'default' | 'small' | 'large' | undefined;
type ToggleColor (line 5) | type ToggleColor =
type ToggleProps (line 28) | interface ToggleProps extends HTMLInputAttributes {
FILE: src/lib/gallery/type.ts
type ImgType (line 4) | type ImgType = {
type GalleryProps (line 9) | interface GalleryProps {
FILE: src/lib/indicator/type.ts
type ColorType (line 4) | type ColorType =
type SizeType (line 26) | type SizeType = 'md' | 'sm' | 'lg' | 'xl' | 'xs' | undefined;
type PlacementType (line 27) | type PlacementType =
type IndicatorProps (line 40) | interface IndicatorProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/kbd/type.ts
type KbdProps (line 4) | interface KbdProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/list-group/type.ts
type ListGroupItemType (line 6) | interface ListGroupItemType {
type ListgroupProps (line 17) | interface ListgroupProps {
type ListgroupItemProps (line 31) | interface ListgroupItemProps extends HTMLAnchorAttributes {
FILE: src/lib/mega-menu/type.ts
type MegaMenuProps (line 5) | interface MegaMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch...
FILE: src/lib/modal/type.ts
type WidthType (line 5) | type WidthType = 'md' | 'sm' | 'lg' | 'xl' | 'xs' | undefined;
type PosisionType (line 6) | type PosisionType =
type ModalProps (line 19) | interface ModalProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/nav/type.ts
type NavbarProps (line 5) | interface NavbarProps extends HTMLAttributes<HTMLElement> {
type NavBrandProps (line 25) | interface NavBrandProps extends HTMLAnchorAttributes {
type NavUlProps (line 33) | interface NavUlProps extends HTMLAttributes<HTMLUListElement> {
type NavLiProps (line 39) | interface NavLiProps extends HTMLAnchorAttributes {
type NavHamburgerProps (line 47) | interface NavHamburgerProps extends HTMLAttributes<HTMLButtonElement> {
FILE: src/lib/pagination/type.ts
type PaginationItemType (line 4) | type PaginationItemType = {
type PaginationItemSpecificProps (line 11) | interface PaginationItemSpecificProps {
type HTMLAttributesWithoutAbort (line 20) | type HTMLAttributesWithoutAbort = Omit<HTMLButtonAttributes, 'on:abort'> &
type PaginationItemProps (line 23) | interface PaginationItemProps extends HTMLAttributesWithoutAbort {
type PaginationProps (line 33) | interface PaginationProps extends HTMLLiAttributes {
FILE: src/lib/popover/index.ts
function calculateTooltipPosition (line 10) | function calculateTooltipPosition({
FILE: src/lib/popover/type.ts
type PopoverColorType (line 5) | type PopoverColorType =
type PopoverProps (line 28) | interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
type Position (line 55) | type Position =
type TooltipPositionOptions (line 69) | interface TooltipPositionOptions {
type PositionResult (line 77) | interface PositionResult {
FILE: src/lib/progress/type.ts
type ColorType (line 4) | type ColorType =
type ProgressbarProps (line 26) | interface ProgressbarProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/rating/type.ts
type RatingItem (line 4) | type RatingItem = { label: string | null | undefined; rating: number };
type AdvancedRatingProps (line 6) | interface AdvancedRatingProps {
type RatingProps (line 18) | interface RatingProps {
type RatingCommentProps (line 30) | interface RatingCommentProps {
type ReviewType (line 53) | type ReviewType = {
type ReviewProps (line 66) | interface ReviewProps extends HTMLAttributes<HTMLElement> {
type ScoreRatingProps (line 82) | interface ScoreRatingProps {
type RatingIconProps (line 93) | interface RatingIconProps extends SVGAttributes<SVGSVGElement> {
FILE: src/lib/sidebar/type.ts
type SidebarCtxType (line 6) | type SidebarCtxType = {
type BreakpointType (line 15) | type BreakpointType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined;
type PosisionType (line 16) | type PosisionType = 'fixed' | 'absolute' | 'static' | undefined;
type SidebarProps (line 18) | interface SidebarProps extends HTMLAttributes<HTMLElement> {
type SidebarButtonProps (line 38) | interface SidebarButtonProps extends HTMLButtonAttributes {
type SidebarCtaProps (line 43) | interface SidebarCtaProps extends HTMLAttributes<HTMLDivElement> {
type SiteType (line 52) | interface SiteType {
type SidebarBrandProps (line 57) | interface SidebarBrandProps extends HTMLAnchorAttributes {
type SidebarDropdownWrapperProps (line 65) | interface SidebarDropdownWrapperProps extends HTMLButtonAttributes {
type SidebarGroupProps (line 83) | interface SidebarGroupProps extends HTMLAttributes<HTMLUListElement> {
type SidebarItemProps (line 89) | interface SidebarItemProps extends HTMLAnchorAttributes {
FILE: src/lib/skeleton/type.ts
type CardSizeType (line 3) | type CardSizeType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined;
type CardPlaceholderProps (line 4) | interface CardPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
type SizeImageType (line 9) | type SizeImageType = 'sm' | 'md' | 'lg' | undefined;
type RoundedType (line 10) | type RoundedType = 'sm' | 'md' | 'lg' | 'none' | 'full' | undefined;
type ImagePlaceholderProps (line 12) | interface ImagePlaceholderProps extends HTMLAttributes<HTMLDivElement> {
type SizeListType (line 18) | type SizeListType = 'sm' | 'md' | 'lg' | undefined;
type RoundedListType (line 19) | type RoundedListType = 'sm' | 'md' | 'lg' | 'none' | 'full' | undefined;
type ListPlaceholderProps (line 21) | interface ListPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
type SizeSkeletonType (line 28) | type SizeSkeletonType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined;
type SkeletonProps (line 30) | interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
type SizeTextType (line 35) | type SizeTextType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined;
type TextPlaceholderProps (line 37) | interface TextPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
type SizeVideoType (line 42) | type SizeVideoType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined;
type VideoPlaceholderProps (line 44) | interface VideoPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/spinner/type.ts
type ColorType (line 3) | type ColorType =
type SizeType (line 25) | type SizeType = '8' | '4' | '5' | '6' | '10' | '12' | '16' | undefined;
type SpinnerProps (line 27) | interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
FILE: src/lib/table/type.ts
type TableCtxType (line 9) | type TableCtxType = {
type HeadItemType (line 17) | type HeadItemType = string | number | {
type TableHeadProps (line 22) | interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
type TableColrType (line 33) | type TableColrType =
type TableItemType (line 56) | type TableItemType = Record<string, string | number | boolean>;
type TableProps (line 58) | interface TableProps extends HTMLTableAttributes {
type TableBodyRowProps (line 72) | interface TableBodyRowProps extends HTMLAttributes<HTMLTableRowElement> {
type TableBodyCellProps (line 80) | interface TableBodyCellProps extends HTMLTdAttributes {
type CellValue (line 88) | type CellValue = string | number | boolean | null | undefined;
type BodyRow (line 89) | type BodyRow = CellValue[] | Record<string, CellValue>;
type TableBodyProps (line 90) | interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
type TableHeadCellProps (line 96) | interface TableHeadCellProps extends HTMLThAttributes {
type TableSearchType (line 101) | type TableSearchType = {
type TableSearchProps (line 106) | interface TableSearchProps extends HTMLTableAttributes {
FILE: src/lib/tabs/type.ts
type TabsProps (line 5) | interface TabsProps extends HTMLAttributes<HTMLUListElement> {
type TabitemProps (line 14) | interface TabitemProps extends HTMLLiAttributes {
type TabCtxType (line 26) | interface TabCtxType {
FILE: src/lib/timeline/type.ts
type ActivityType (line 4) | interface ActivityType {
type GroupTimelineType (line 12) | interface GroupTimelineType {
type ActivityProps (line 21) | interface ActivityProps extends HTMLOlAttributes {
type ActivityItemProps (line 26) | interface ActivityItemProps extends HTMLLiAttributes {
type GroupProps (line 38) | interface GroupProps extends HTMLOlAttributes {
type GroupItemProps (line 46) | interface GroupItemProps extends HTMLLiAttributes {
type DateFormat (line 55) | type DateFormat = 'year' | 'month-year' | 'full-date';
type TimelineProps (line 57) | interface TimelineProps extends HTMLOlAttributes {
type TimelineItemProps (line 63) | interface TimelineItemProps extends HTMLLiAttributes {
FILE: src/lib/toast/type.ts
type ColorType (line 5) | type ColorType =
type PositionType (line 26) | type PositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-r...
type ToastProps (line 28) | interface ToastProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/toolbar/type.ts
type ToolbarColor (line 4) | type ToolbarColor = 'primary' | 'secondary' | 'default' | undefined;
type ToolbarProps (line 6) | interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
type SpacingType (line 14) | type SpacingType = 'default' | 'tight' | 'loose' | undefined;
type PaddingType (line 15) | type PaddingType = 'default' | 'none' | undefined;
type PositionType (line 16) | type PositionType = 'first' | 'last' | 'middle' | undefined;
type ToolbarGroupProps (line 18) | interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {
type ToolbarButtonType (line 26) | type ToolbarButtonType =
type ToolbarButtonProps (line 40) | interface ToolbarButtonProps {
FILE: src/lib/tooltip/type.ts
type TooltipColorType (line 5) | type TooltipColorType =
type TooltipProps (line 29) | interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
FILE: src/lib/types.ts
type ColorName (line 11) | type ColorName =
type CloseButtonColorType (line 39) | type CloseButtonColorType =
type IndicatorPlacementType (line 53) | type IndicatorPlacementType =
type drawerTransitionParamTypes (line 65) | interface drawerTransitionParamTypes {
type FormSizeType (line 75) | type FormSizeType = 'sm' | 'md' | 'lg';
type navbarType (line 106) | type navbarType = {
type ColorVariant (line 114) | type ColorVariant =
type DeviceVariantType (line 128) | type DeviceVariantType =
type SizeType (line 147) | type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
type TransitionTypes (line 149) | type TransitionTypes =
type TransitionParamTypes (line 163) | interface TransitionParamTypes {
type ParamsType (line 171) | type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | Sc...
type TransitionFunc (line 173) | type TransitionFunc = (node: HTMLElement, params: ParamsType) => Transit...
type ModalPlacementType (line 175) | type ModalPlacementType =
type LinkType (line 187) | interface LinkType {
FILE: src/lib/typography/anchor/type.ts
type AnchorColorType (line 4) | type AnchorColorType =
type AnchorProps (line 27) | interface AnchorProps extends HTMLAnchorAttributes {
FILE: src/lib/typography/blockquote/type.ts
type SizeType (line 4) | type SizeType =
type AlignmentType (line 19) | type AlignmentType = 'left' | 'center' | 'right' | undefined;
type BlockquoteProps (line 21) | interface BlockquoteProps extends HTMLBlockquoteAttributes {
FILE: src/lib/typography/descriptionlist/type.ts
type DescriptionListProps (line 4) | interface DescriptionListProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/heading/type.ts
type TagType (line 4) | type TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
type HeadingProps (line 6) | interface HeadingProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/hr/type.ts
type HrProps (line 4) | interface HrProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/img/type.ts
type SizeType (line 4) | type SizeType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | 'xs' | 'ful...
type AlignmentType (line 5) | type AlignmentType = 'left' | 'center' | 'right' | undefined;
type EffectType (line 6) | type EffectType =
type ShadowType (line 15) | type ShadowType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | 'regular'...
type RoundedType (line 16) | type RoundedType =
type EnhancedImgAttributes (line 28) | type EnhancedImgAttributes = Omit<HTMLImgAttributes, 'src'> & { src: str...
type ImgProps (line 30) | interface ImgProps extends HTMLImgAttributes {
type EnhandedImgProps (line 44) | interface EnhandedImgProps extends EnhancedImgAttributes {
FILE: src/lib/typography/layout/type.ts
type LayoutProps (line 4) | interface LayoutProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/list/type.ts
type TagType (line 4) | type TagType = 'ul' | 'dl' | 'ol' | undefined;
type PositionType (line 5) | type PositionType = 'inside' | 'outside' | undefined;
type ListProps (line 7) | interface ListProps {
type LiProps (line 16) | interface LiProps extends HTMLLiAttributes {
FILE: src/lib/typography/mark/type.ts
type MarkProps (line 4) | interface MarkProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/paragraph/type.ts
type PsizeType (line 4) | type PsizeType =
type PweightType (line 19) | type PweightType =
type SpaceType (line 30) | type SpaceType = 'normal' | 'tighter' | 'tight' | 'wide' | 'wider' | 'wi...
type HeightType (line 31) | type HeightType =
type AlignType (line 47) | type AlignType = 'left' | 'center' | 'right' | undefined;
type WhitespaceType (line 48) | type WhitespaceType = 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap...
type ParagraphProps (line 50) | interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
FILE: src/lib/typography/secondary/type.ts
type SecondaryProps (line 4) | interface SecondaryProps extends HTMLAttributes<HTMLElement> {
FILE: src/lib/typography/span/type.ts
type DecorationType (line 4) | type DecorationType = 'none' | 'solid' | 'double' | 'dotted' | 'dashed' ...
type GradientType (line 5) | type GradientType =
type HighlightType (line 20) | type HighlightType =
type DecorationColorType (line 36) | type DecorationColorType =
type DecorationThicknessType (line 58) | type DecorationThicknessType = '1' | '2' | '4' | '8' | '0' | undefined;
type SpanProps (line 60) | interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
FILE: src/lib/uiHelpers.svelte.ts
function uiHelpers (line 1) | function uiHelpers() {
function clickOutside (line 33) | function clickOutside(element: HTMLElement, callbackFunction?: () => voi...
function idGenerator (line 63) | function idGenerator() {
FILE: src/lib/utils/focusTrap.ts
method destroy (line 39) | destroy() {
FILE: src/lib/utils/index.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
type ColorType (line 83) | type ColorType =
type SizeType (line 105) | type SizeType = 'md' | 'xs' | 'sm' | 'lg' | undefined;
type CloseButtonProps (line 107) | interface CloseButtonProps {
FILE: src/lib/video/type.ts
type VideoProps (line 4) | interface VideoProps extends HTMLVideoAttributes {
FILE: src/routes/sitemap.xml/+server.ts
type Page (line 1) | interface Page {
function GET (line 229) | async function GET() {
FILE: src/routes/utils/anchor/index.ts
type AnchorProps (line 6) | interface AnchorProps extends HTMLAttributes<HTMLHeadingElement> {
FILE: src/routes/utils/helpers.ts
function removeHyphensAndCapitalize (line 1) | function removeHyphensAndCapitalize(str: string) {
function toKebabCase (line 14) | function toKebabCase(inputString: string) {
function splitAndCapitalize (line 18) | function splitAndCapitalize(text: string) {
function copyToClipboard (line 39) | function copyToClipboard(text: string): Promise<void> {
function toUpperSnakeCase (line 51) | function toUpperSnakeCase(text: string): string {
function getFilteredFileNames (line 91) | function getFilteredFileNames(dirName: string): string[] {
function replaceLibImport (line 108) | function replaceLibImport(componentString: string): string {
function getExampleFileName (line 114) | function getExampleFileName(
FILE: src/routes/utils/highlight/languages/index.d.ts
type LanguageType (line 3) | interface LanguageType<TName extends string> {
Condensed preview — 2139 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,430K chars).
[
{
"path": ".changeset/README.md",
"chars": 510,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 331,
"preview": "{\n\t\"$schema\": \"https://unpkg.com/@changesets/config@3.0.0/schema.json\",\n\t\"changelog\": [\n\t\t\"@svitejs/changesets-changelog"
},
{
"path": ".gitignore",
"chars": 229,
"preview": "test-results\nnode_modules\n\n# Output\n.output\n.vercel\n.netlify\n.wrangler\n/.svelte-kit\n/build\n/dist\n\n# OS\n.DS_Store\nThumbs."
},
{
"path": ".npmrc",
"chars": 19,
"preview": "engine-strict=true\n"
},
{
"path": ".prettierignore",
"chars": 62,
"preview": "# Package Managers\npackage-lock.json\npnpm-lock.yaml\nyarn.lock\n"
},
{
"path": ".prettierrc",
"chars": 257,
"preview": "{\n\t\"useTabs\": false,\n\t\"singleQuote\": true,\n\t\"trailingComma\": \"none\",\n\t\"printWidth\": 100,\n\t\"plugins\": [\"prettier-plugin-s"
},
{
"path": "CHANGELOG.md",
"chars": 52472,
"preview": "# Changelog\n\n## 0.12.6\n\n### Patch Changes\n\n- fix: remove compo docs\n\n## 0.12.5\n\n### Patch Changes\n\n- fix: modal backdrop"
},
{
"path": "License",
"chars": 1099,
"preview": "MIT License\n\nCopyright (c) 2022 Flowbite Svelte (created by Shinichi Okada)\n\nPermission is hereby granted, free of charg"
},
{
"path": "README.md",
"chars": 514,
"preview": "# Svelte 5 UI Lib (Now merged with [Flowbite Svelte](https://flowbite-svelte.com/))\n\n\nSvelte 5 UI Lib is a UI library bu"
},
{
"path": "e2e/alert.test.ts",
"chars": 2274,
"preview": "import { expect, test } from '@playwright/test';\n\ntest.beforeEach(async ({ page }) => {\n\tconsole.log(`Running ${test.inf"
},
{
"path": "e2e/components.test.ts",
"chars": 5942,
"preview": "import { expect, test } from '@playwright/test';\n\ntest('accordion page has expected h1', async ({ page }) => {\n\tawait pa"
},
{
"path": "e2e/forms.test.ts",
"chars": 1849,
"preview": "import { expect, test } from '@playwright/test';\n\ntest('checkbox page has expected h1', async ({ page }) => {\n\tawait pag"
},
{
"path": "e2e/home.test.ts",
"chars": 2222,
"preview": "import { expect, test } from '@playwright/test';\n\ntest.beforeEach(async ({ page }) => {\n\tconsole.log(`Running ${test.inf"
},
{
"path": "e2e/other.test.ts",
"chars": 369,
"preview": "import { expect, test } from '@playwright/test';\n\n// plugins\ntest('chart page has expected h1', async ({ page }) => {\n\ta"
},
{
"path": "e2e/typography.test.ts",
"chars": 1484,
"preview": "import { expect, test } from '@playwright/test';\n\ntest('blockquote page has expected h1', async ({ page }) => {\n\tawait p"
},
{
"path": "eslint.config.js",
"chars": 967,
"preview": "import prettier from 'eslint-config-prettier';\nimport js from '@eslint/js';\nimport { includeIgnoreFile } from '@eslint/c"
},
{
"path": "package.json",
"chars": 23409,
"preview": "{\n \"name\": \"svelte-5-ui-lib\",\n \"version\": \"0.12.6\",\n \"description\": \"Svelte 5 UI Lib is a UI library built from scrat"
},
{
"path": "playwright.config.ts",
"chars": 179,
"preview": "import { defineConfig } from '@playwright/test';\n\nexport default defineConfig({\n\twebServer: {\n\t\tcommand: 'npm run build "
},
{
"path": "scripts/generateFileList.ts",
"chars": 1187,
"preview": "// scripts/generateFileList.ts\nimport fs from 'fs/promises';\nimport path from 'path';\nimport { fileURLToPath } from 'url"
},
{
"path": "src/app.css",
"chars": 8993,
"preview": "@import 'tailwindcss';\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@source \"../node_modules/flowbite-svelte-icons/"
},
{
"path": "src/app.d.ts",
"chars": 551,
"preview": "// See https://kit.svelte.dev/docs/types#app\n// for information about these interfaces\ndeclare global {\n\tnamespace App {"
},
{
"path": "src/app.html",
"chars": 796,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"%sveltekit.ass"
},
{
"path": "src/demo.spec.ts",
"chars": 148,
"preview": "import { describe, it, expect } from 'vitest';\n\ndescribe('sum test', () => {\n\tit('adds 1 + 2 to equal 3', () => {\n\t\texpe"
},
{
"path": "src/generatedFileList.ts",
"chars": 5517,
"preview": "export const fileList = [\n \"src/lib/accordion/Accordion.svelte\",\n \"src/lib/accordion/AccordionItem.svelte\",\n \"src/lib"
},
{
"path": "src/lib/accordion/Accordion.svelte",
"chars": 487,
"preview": "<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\timport { type AccordionProps as Props, accordion } from './';\n"
},
{
"path": "src/lib/accordion/AccordionItem.svelte",
"chars": 2404,
"preview": "<script lang=\"ts\">\n\timport { twMerge } from 'tailwind-merge';\n\timport { slide } from 'svelte/transition';\n\timport { getC"
},
{
"path": "src/lib/accordion/index.ts",
"chars": 262,
"preview": "export { default as Accordion } from './Accordion.svelte';\nexport { default as AccordionItem } from './AccordionItem.sve"
},
{
"path": "src/lib/accordion/theme.ts",
"chars": 1264,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const accordion = tv({\n\tbase: 'w-full text-gray-500 dark:text-gray-400',"
},
{
"path": "src/lib/accordion/type.ts",
"chars": 1055,
"preview": "import { type Writable } from 'svelte/store';\nimport type { Snippet } from 'svelte';\nimport type { ParamsType, Transitio"
},
{
"path": "src/lib/alert/Alert.svelte",
"chars": 1761,
"preview": "<script lang=\"ts\">\n\timport { type AlertProps as Props, alert } from '.';\n\timport { CloseButton } from '$lib';\n\timport { "
},
{
"path": "src/lib/alert/index.ts",
"chars": 333,
"preview": "// import Alert from \"./Alert.svelte\";\n// import type { alertColor, AlertProps } from \"./type\";\n// import { alert } from"
},
{
"path": "src/lib/alert/theme.ts",
"chars": 6257,
"preview": "import { tv } from 'tailwind-variants';\n\nconst alert = tv({\n\tbase: 'p-4 gap-3 text-sm',\n\tvariants: {\n\t\tcolor: {\n\t\t\t// pr"
},
{
"path": "src/lib/alert/type.ts",
"chars": 763,
"preview": "import type { Snippet } from 'svelte';\nimport type { ParamsType, TransitionFunc } from '../types';\nimport type { HTMLAtt"
},
{
"path": "src/lib/avatar/Avatar.svelte",
"chars": 1396,
"preview": "<script lang=\"ts\">\n\timport { Indicator } from '$lib';\n\timport { type AvatarProps as Props, avatar } from '.';\n\n\tlet {\n\t\t"
},
{
"path": "src/lib/avatar/index.ts",
"chars": 161,
"preview": "import type { AvatarProps } from './type';\nimport Avatar from './Avatar.svelte';\nimport { avatar } from './theme';\n\nexpo"
},
{
"path": "src/lib/avatar/theme.ts",
"chars": 674,
"preview": "import { tv } from 'tailwind-variants';\n\nconst avatar = tv({\n\tbase: 'relative flex items-center justify-center bg-gray-1"
},
{
"path": "src/lib/avatar/type.ts",
"chars": 530,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';\n\nint"
},
{
"path": "src/lib/badge/Badge.svelte",
"chars": 1751,
"preview": "<script lang=\"ts\">\n\timport { type BadgeProps as Props, badge } from './index';\n\timport { CloseButton } from '$lib';\n\timp"
},
{
"path": "src/lib/badge/index.ts",
"chars": 191,
"preview": "import type { BadgeProps, BadgeColorType } from './type';\nimport Badge from './Badge.svelte';\nimport { badge } from './t"
},
{
"path": "src/lib/badge/theme.ts",
"chars": 7366,
"preview": "import { tv } from 'tailwind-variants';\n\nconst badge = tv({\n\tslots: {\n\t\threfClass: 'flex align-middle',\n\t\tbase: 'font-me"
},
{
"path": "src/lib/badge/type.ts",
"chars": 896,
"preview": "import type { Snippet } from 'svelte';\nimport type { ParamsType, TransitionFunc } from '../types';\nimport type { HTMLAtt"
},
{
"path": "src/lib/banner/Banner.svelte",
"chars": 1167,
"preview": "<script lang=\"ts\">\n\timport { CloseButton } from '$lib';\n\timport { fade } from 'svelte/transition';\n\timport { type Banner"
},
{
"path": "src/lib/banner/index.ts",
"chars": 161,
"preview": "import type { BannerProps } from './type';\nimport Banner from './Banner.svelte';\nimport { banner } from './theme';\n\nexpo"
},
{
"path": "src/lib/banner/theme.ts",
"chars": 2693,
"preview": "import { tv } from 'tailwind-variants';\n\nconst banner = tv({\n\tslots: {\n\t\tbase: 'z-10 flex justify-between p-4 dark:bg-gr"
},
{
"path": "src/lib/banner/type.ts",
"chars": 913,
"preview": "import type { Snippet } from 'svelte';\nimport type { TransitionFunc } from '../types';\nimport type { HTMLAttributes } fr"
},
{
"path": "src/lib/bottom-navigation/BottomNav.svelte",
"chars": 1171,
"preview": "<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\timport { twMerge } from 'tailwind-merge';\n\timport { writable }"
},
{
"path": "src/lib/bottom-navigation/BottomNavHeader.svelte",
"chars": 400,
"preview": "<script lang=\"ts\">\n\timport { type BottomNavHeaderProps as Props, bottomnavheader } from '.';\n\n\tlet { children, outerClas"
},
{
"path": "src/lib/bottom-navigation/BottomNavHeaderItem.svelte",
"chars": 314,
"preview": "<script lang=\"ts\">\n\timport { type BottomNavHeaderItemProps as Props, bottomnavheaderitem } from '.';\n\tlet { itemName, ac"
},
{
"path": "src/lib/bottom-navigation/BottomNavItem.svelte",
"chars": 1985,
"preview": "<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\timport type { HTMLButtonAttributes, HTMLAnchorAttributes } fro"
},
{
"path": "src/lib/bottom-navigation/index.ts",
"chars": 782,
"preview": "import type {\n\tBottomNavProps,\n\tBottomNavItemProps,\n\tBottomNavContextType,\n\tBottomNavVariantType,\n\tBottomNavHeaderProps,"
},
{
"path": "src/lib/bottom-navigation/theme.ts",
"chars": 3341,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const bottomNav = tv({\n\tslots: {\n\t\touter: 'w-full z-30 border-gray-200 d"
},
{
"path": "src/lib/bottom-navigation/type.ts",
"chars": 1507,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from '"
},
{
"path": "src/lib/breadcrumb/Breadcrumb.svelte",
"chars": 766,
"preview": "<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\timport { type BreadcrumbProps as Props, breadcrumb } from './i"
},
{
"path": "src/lib/breadcrumb/BreadcrumbItem.svelte",
"chars": 1615,
"preview": "<script lang=\"ts\">\n\timport { type BreadcrumbItemProps as Props, breadcrumb } from './index';\n\timport { twMerge } from 't"
},
{
"path": "src/lib/breadcrumb/index.ts",
"chars": 306,
"preview": "import type { BreadcrumbProps, BreadcrumbItemProps } from './type';\nimport Breadcrumb from './Breadcrumb.svelte';\nimport"
},
{
"path": "src/lib/breadcrumb/theme.ts",
"chars": 1134,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const breadcrumb = tv({\n\tslots: {\n\t\tnav: 'flex',\n\t\tlist: 'inline-flex it"
},
{
"path": "src/lib/breadcrumb/type.ts",
"chars": 603,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\nimport type { HTMLLiAttrib"
},
{
"path": "src/lib/buttongroup/ButtonGroup.svelte",
"chars": 396,
"preview": "<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\timport { type ButtonGroupProps as Props, buttonGroup } from '."
},
{
"path": "src/lib/buttongroup/index.ts",
"chars": 196,
"preview": "import type { ButtonGroupProps } from './type';\nimport ButtonGroup from './ButtonGroup.svelte';\nimport { buttonGroup } f"
},
{
"path": "src/lib/buttongroup/theme.ts",
"chars": 263,
"preview": "import { tv } from 'tailwind-variants';\n\nconst buttonGroup = tv({\n\tbase: 'inline-flex rounded-lg shadow-sm',\n\tvariants: "
},
{
"path": "src/lib/buttongroup/type.ts",
"chars": 210,
"preview": "import type { Snippet } from 'svelte';\n\ninterface ButtonGroupProps {\n\tchildren: Snippet;\n\tsize?: SizeType;\n\tclass?: stri"
},
{
"path": "src/lib/buttons/Button.svelte",
"chars": 939,
"preview": "<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\timport type { SizeType } from '$lib/types';\n\timport { type But"
},
{
"path": "src/lib/buttons/GradientButton.svelte",
"chars": 844,
"preview": "<script lang=\"ts\">\n\timport Button from './Button.svelte';\n\timport { getContext } from 'svelte';\n\timport { type GradientB"
},
{
"path": "src/lib/buttons/index.ts",
"chars": 316,
"preview": "import type { ButtonProps, GradientButtonProps } from './type';\nimport Button from './Button.svelte';\nimport GradientBut"
},
{
"path": "src/lib/buttons/theme.ts",
"chars": 13571,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const button = tv({\n\tbase: 'text-center font-medium inline-flex items-ce"
},
{
"path": "src/lib/buttons/type.ts",
"chars": 1468,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements'"
},
{
"path": "src/lib/cards/Card.svelte",
"chars": 1304,
"preview": "<script lang=\"ts\">\n\timport { card, type CardProps as Props } from '.';\n\timport type { HTMLAttributes, HTMLAnchorAttribut"
},
{
"path": "src/lib/cards/index.ts",
"chars": 147,
"preview": "import type { CardProps } from './type';\nimport Card from './Card.svelte';\nimport { card } from './theme';\n\nexport { Car"
},
{
"path": "src/lib/cards/theme.ts",
"chars": 6298,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const card = tv({\n\tslots: {\n\t\tbase: 'w-full flex max-w-sm bg-white borde"
},
{
"path": "src/lib/cards/type.ts",
"chars": 1206,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';\n\n// "
},
{
"path": "src/lib/chart/Chart.svelte",
"chars": 755,
"preview": "<script lang=\"ts\">\n\timport type { ApexOptions } from 'apexcharts';\n\timport type ApexCharts from 'apexcharts';\n\timport '."
},
{
"path": "src/lib/chart/chart.css",
"chars": 4779,
"preview": ".apexcharts-canvas .apexcharts-tooltip {\n\tbackground-color: white;\n\tcolor: #6b7280;\n\tborder: 0 !important;\n\tborder-radiu"
},
{
"path": "src/lib/chart/index.ts",
"chars": 114,
"preview": "import type { ChartProps } from './type';\nimport Chart from './Chart.svelte';\n\nexport { Chart, type ChartProps };\n"
},
{
"path": "src/lib/chart/type.ts",
"chars": 142,
"preview": "import type { ApexOptions } from 'apexcharts';\n\ninterface ChartProps {\n\toptions: ApexOptions;\n\tclass?: string;\n}\n\nexport"
},
{
"path": "src/lib/darkmode/Darkmode.svelte",
"chars": 2483,
"preview": "<script lang=\"ts\">\n\timport { type DarkmodeProps as Props, darkmode } from './';\n\n\t// const THEME_PREFERENCE_KEY = 'color"
},
{
"path": "src/lib/darkmode/index.ts",
"chars": 175,
"preview": "import type { DarkmodeProps } from './type';\nimport Darkmode from './Darkmode.svelte';\nimport { darkmode } from './theme"
},
{
"path": "src/lib/darkmode/theme.ts",
"chars": 214,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const darkmode = tv({\n\tbase: 'text-gray-500 dark:text-gray-400 hover:bg-"
},
{
"path": "src/lib/darkmode/type.ts",
"chars": 299,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLButtonAttributes } from 'svelte/elements';\n\ninterface DarkmodeP"
},
{
"path": "src/lib/device-mockups/Android.svelte",
"chars": 718,
"preview": "<script lang=\"ts\">\n\timport { type AndroidProps as Props, android } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tdivClass,\n\t\tdiv2Class"
},
{
"path": "src/lib/device-mockups/DefaultMockup.svelte",
"chars": 663,
"preview": "<script lang=\"ts\">\n\timport { type DefaultMockupProps as Props, defaultMockup } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tdivClass,"
},
{
"path": "src/lib/device-mockups/Desktop.svelte",
"chars": 495,
"preview": "<script lang=\"ts\">\n\timport { type MockupBaseProps as Props, desktop } from '.';\n\n\tlet { children, divClass, div2Class, d"
},
{
"path": "src/lib/device-mockups/DeviceMockup.svelte",
"chars": 765,
"preview": "<script lang=\"ts\">\n\timport type { Component } from 'svelte';\n\timport Android from './Android.svelte';\n\timport DefaultMoc"
},
{
"path": "src/lib/device-mockups/Ios.svelte",
"chars": 633,
"preview": "<script lang=\"ts\">\n\timport { type IosProps as Props, ios } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tdivClass,\n\t\tdiv2Class,\n\t\tdiv3"
},
{
"path": "src/lib/device-mockups/Laptop.svelte",
"chars": 514,
"preview": "<script lang=\"ts\">\n\timport { type MockupBaseProps as Props, laptop } from '.';\n\n\tlet { children, divClass, div2Class, di"
},
{
"path": "src/lib/device-mockups/Smartwatch.svelte",
"chars": 676,
"preview": "<script lang=\"ts\">\n\timport { type SmartwatchProps as Props, smartwatch } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tdivClass,\n\t\tdiv"
},
{
"path": "src/lib/device-mockups/Tablet.svelte",
"chars": 650,
"preview": "<script lang=\"ts\">\n\timport { type TabletProps as Props, tablet } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tdivClass,\n\t\tdiv2Class,\n"
},
{
"path": "src/lib/device-mockups/index.ts",
"chars": 900,
"preview": "import type {\n\tAndroidProps,\n\tDefaultMockupProps,\n\tDeviceMockupProps,\n\tIosProps,\n\tSmartwatchProps,\n\tTabletProps,\n\tMockup"
},
{
"path": "src/lib/device-mockups/theme.ts",
"chars": 4631,
"preview": "import { tv } from 'tailwind-variants';\n\n// Android\nconst android = tv({\n\tslots: {\n\t\tdiv: 'relative mx-auto border-gray-"
},
{
"path": "src/lib/device-mockups/type.ts",
"chars": 1459,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\nimport type { DeviceVarian"
},
{
"path": "src/lib/drawer/Drawer.svelte",
"chars": 1253,
"preview": "<script lang=\"ts\">\n\timport type { ParamsType } from '$lib/types';\n\timport { fly } from 'svelte/transition';\n\timport { si"
},
{
"path": "src/lib/drawer/Drawerhead.svelte",
"chars": 875,
"preview": "<script lang=\"ts\">\n\timport { drawerhead, type DrawerheadProps as Props } from '.';\n\n\tlet {\n\t\tcloseIcon,\n\t\tchildren,\n\t\tbu"
},
{
"path": "src/lib/drawer/index.ts",
"chars": 282,
"preview": "import type { DrawerProps, DrawerheadProps } from './type';\nimport Drawer from './Drawer.svelte';\nimport Drawerhead from"
},
{
"path": "src/lib/drawer/theme.ts",
"chars": 1031,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const drawer = tv({\n\tslots: {\n\t\tbase: 'overflow-y-auto z-50 p-4 bg-white"
},
{
"path": "src/lib/drawer/type.ts",
"chars": 933,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';\nimpo"
},
{
"path": "src/lib/dropdown/Dropdown.svelte",
"chars": 936,
"preview": "<script lang=\"ts\">\n\timport { type DropdownProps as Props, dropdown } from './';\n\timport { fly } from 'svelte/transition'"
},
{
"path": "src/lib/dropdown/DropdownDivider.svelte",
"chars": 256,
"preview": "<script lang=\"ts\">\n\timport { type DropdownDividerProps as Props, dropdowndivider } from './';\n\n\tlet { class: divClass, ."
},
{
"path": "src/lib/dropdown/DropdownFooter.svelte",
"chars": 309,
"preview": "<script lang=\"ts\">\n\timport { type DropdownFooterProps as Props, dropdownFooter } from '.';\n\n\tlet { children, class: clas"
},
{
"path": "src/lib/dropdown/DropdownHeader.svelte",
"chars": 309,
"preview": "<script lang=\"ts\">\n\timport { type DropdownHeaderProps as Props, dropdownHeader } from '.';\n\n\tlet { children, class: clas"
},
{
"path": "src/lib/dropdown/DropdownLi.svelte",
"chars": 862,
"preview": "<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\timport { type DropdownLiProps as Props, dropdownli } from './'"
},
{
"path": "src/lib/dropdown/DropdownUl.svelte",
"chars": 286,
"preview": "<script lang=\"ts\">\n\timport { type DropdownUlProps as Props, dropdownul } from '.';\n\n\tlet { children, class: className, ."
},
{
"path": "src/lib/dropdown/index.ts",
"chars": 901,
"preview": "import type {\n\tDropdownProps,\n\tDropdownDividerProps,\n\tDropdownLiProps,\n\tDropdownUlProps,\n\tDropdownHeaderProps,\n\tDropdown"
},
{
"path": "src/lib/dropdown/theme.ts",
"chars": 907,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const dropdown = tv({\n\tslots: {\n\t\tbase: 'z-10 w-44 mt-2 divide-y divide-"
},
{
"path": "src/lib/dropdown/type.ts",
"chars": 1259,
"preview": "import type { Snippet } from 'svelte';\nimport type { ParamsType, TransitionFunc } from '../types';\nimport type { HTMLAtt"
},
{
"path": "src/lib/footer/Footer.svelte",
"chars": 319,
"preview": "<script lang=\"ts\">\n\timport { type FooterProps as Props, footer } from '.';\n\n\tlet { children, footerType = 'default', cla"
},
{
"path": "src/lib/footer/FooterBrand.svelte",
"chars": 604,
"preview": "<script lang=\"ts\">\n\timport { type FooterBrandProps as Props, footerBrand } from '.';\n\n\tlet { children, aClass, spanClass"
},
{
"path": "src/lib/footer/FooterCopyright.svelte",
"chars": 572,
"preview": "<script lang=\"ts\">\n\timport { type FooterCopyrightProps as Props, footerCopyright } from '.';\n\n\tlet {\n\t\tspanClass,\n\t\taCla"
},
{
"path": "src/lib/footer/FooterIcon.svelte",
"chars": 373,
"preview": "<script lang=\"ts\">\n\timport { type FooterIconProps as Props, footerIcon } from '.';\n\n\tlet { children, href, ariaLabel, cl"
},
{
"path": "src/lib/footer/FooterLi.svelte",
"chars": 344,
"preview": "<script lang=\"ts\">\n\timport { type FooterLiProps as Props, footerLi } from './';\n\n\tlet { children, liClass, aClass, href,"
},
{
"path": "src/lib/footer/FooterUl.svelte",
"chars": 274,
"preview": "<script lang=\"ts\">\n\timport { type FooterUlProps as Props, footerUl } from './';\n\n\tlet { class: ulClass, children, ...res"
},
{
"path": "src/lib/footer/index.ts",
"chars": 804,
"preview": "import type {\n\tFooterProps,\n\tFooterBrandProps,\n\tFooterCopyrightProps,\n\tFooterIconProps,\n\tFooterUlProps,\n\tFooterLiProps\n}"
},
{
"path": "src/lib/footer/theme.ts",
"chars": 1194,
"preview": "import { tv } from 'tailwind-variants';\n\nconst footer = tv({\n\tbase: 'bg-white dark:bg-gray-800',\n\tvariants: {\n\t\tfooterTy"
},
{
"path": "src/lib/footer/type.ts",
"chars": 1244,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';\n\ntyp"
},
{
"path": "src/lib/forms/checkbox/Checkbox.svelte",
"chars": 1146,
"preview": "<script lang=\"ts\">\n\timport Label from '../label/Label.svelte';\n\timport { type CheckboxProps as Props, checkbox } from '."
},
{
"path": "src/lib/forms/checkbox/index.ts",
"chars": 235,
"preview": "import type { CheckboxProps, CheckboxItem, ColorType } from './type';\nimport Checkbox from './Checkbox.svelte';\nimport {"
},
{
"path": "src/lib/forms/checkbox/theme.ts",
"chars": 3086,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const checkbox = tv({\n\tslots: {\n\t\tbase: 'w-4 h-4 bg-gray-100 border-gray"
},
{
"path": "src/lib/forms/checkbox/type.ts",
"chars": 836,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\n\ntype CheckboxItem = "
},
{
"path": "src/lib/forms/checkbox-button/CheckboxButton.svelte",
"chars": 1531,
"preview": "<script lang=\"ts\">\n\timport Button from '$lib/buttons/Button.svelte';\n\timport { twMerge } from 'tailwind-merge';\n\timport "
},
{
"path": "src/lib/forms/checkbox-button/index.ts",
"chars": 159,
"preview": "import type { CheckboxButtonProps } from './type';\nimport CheckboxButton from './CheckboxButton.svelte';\n\nexport { Check"
},
{
"path": "src/lib/forms/checkbox-button/theme.ts",
"chars": 0,
"preview": ""
},
{
"path": "src/lib/forms/checkbox-button/type.ts",
"chars": 440,
"preview": "import type { SizeType, ColorName } from '$lib/types';\nimport type { Snippet } from 'svelte';\n\ninterface CheckboxButtonP"
},
{
"path": "src/lib/forms/dropzone/Dropzone.svelte",
"chars": 1602,
"preview": "<script lang=\"ts\">\n\timport type { DragEventHandler, ChangeEventHandler } from 'svelte/elements';\n\timport { type Dropzone"
},
{
"path": "src/lib/forms/dropzone/index.ts",
"chars": 175,
"preview": "import type { DropzoneProps } from './type';\nimport { dropzone } from './theme';\nimport Dropzone from './Dropzone.svelte"
},
{
"path": "src/lib/forms/dropzone/theme.ts",
"chars": 342,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const dropzone = tv({\n\tbase: 'flex flex-col justify-center items-center "
},
{
"path": "src/lib/forms/dropzone/type.ts",
"chars": 251,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\n\ninterface DropzonePr"
},
{
"path": "src/lib/forms/fileupload/Fileupload.svelte",
"chars": 921,
"preview": "<script lang=\"ts\">\n\timport { type FileuploadProps as Props, fileupload } from '.';\n\timport { CloseButton } from '$lib';\n"
},
{
"path": "src/lib/forms/fileupload/index.ts",
"chars": 189,
"preview": "import type { FileuploadProps } from './type';\nimport Fileupload from './Fileupload.svelte';\nimport { fileupload } from "
},
{
"path": "src/lib/forms/fileupload/theme.ts",
"chars": 733,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const fileupload = tv({\n\tslots: {\n\t\tbase: 'block w-full disabled:cursor-"
},
{
"path": "src/lib/forms/fileupload/type.ts",
"chars": 337,
"preview": "import type { HTMLInputAttributes } from 'svelte/elements';\nimport type { InputProps } from '$lib';\n\ninterface Fileuploa"
},
{
"path": "src/lib/forms/floating-label-input/FloatingLabelInput.svelte",
"chars": 767,
"preview": "<script lang=\"ts\">\n\timport { idGenerator } from '../../uiHelpers.svelte';\n\timport { type FloatingLabelInputProps as Prop"
},
{
"path": "src/lib/forms/floating-label-input/index.ts",
"chars": 245,
"preview": "import type { FloatingLabelInputProps } from './type';\nimport FloatingLabelInput from './FloatingLabelInput.svelte';\nimp"
},
{
"path": "src/lib/forms/floating-label-input/theme.ts",
"chars": 7134,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const floatingLabelInput = tv({\n\tslots: {\n\t\tbase: 'relative',\n\t\tinput:\n\t"
},
{
"path": "src/lib/forms/floating-label-input/type.ts",
"chars": 562,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\nimport { type ColorNa"
},
{
"path": "src/lib/forms/helper/Helper.svelte",
"chars": 286,
"preview": "<script lang=\"ts\">\n\timport { type HelperProps as Props, helper } from '.';\n\n\tlet { children, class: className, color = '"
},
{
"path": "src/lib/forms/helper/index.ts",
"chars": 161,
"preview": "import type { HelperProps } from './type';\nimport Helper from './Helper.svelte';\nimport { helper } from './theme';\n\nexpo"
},
{
"path": "src/lib/forms/helper/theme.ts",
"chars": 1186,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const helper = tv({\n\tbase: 'text-xs font-normal text-gray-500 dark:text-"
},
{
"path": "src/lib/forms/helper/type.ts",
"chars": 311,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\nimport { type ColorName } "
},
{
"path": "src/lib/forms/input/Input.svelte",
"chars": 1725,
"preview": "<script lang=\"ts\">\n\timport type { SizeType } from '$lib/types';\n\timport { getContext } from 'svelte';\n\timport { CloseBut"
},
{
"path": "src/lib/forms/input/index.ts",
"chars": 331,
"preview": "import type { InputProps, InputValue } from './type';\nimport Input from './Input.svelte';\nimport type { SizeType } from "
},
{
"path": "src/lib/forms/input/theme.ts",
"chars": 7246,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const input = tv({\n\tslots: {\n\t\tbase: 'relative w-full',\n\t\tinput:\n\t\t\t'blo"
},
{
"path": "src/lib/forms/input/type.ts",
"chars": 708,
"preview": "import type { HTMLInputAttributes } from 'svelte/elements';\nimport type { FormSizeType, ColorName } from '$lib/types';\ni"
},
{
"path": "src/lib/forms/input-addon/InputAddon.svelte",
"chars": 1542,
"preview": "<script lang=\"ts\">\n\timport type { SizeType } from '$lib/types';\n\timport { twMerge } from 'tailwind-merge';\n\timport { get"
},
{
"path": "src/lib/forms/input-addon/index.ts",
"chars": 139,
"preview": "import type { InputAddonProps } from './type';\nimport InputAddon from './InputAddon.svelte';\n\nexport { InputAddon, type "
},
{
"path": "src/lib/forms/input-addon/type.ts",
"chars": 274,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\ninterface InputAddonProps "
},
{
"path": "src/lib/forms/label/Label.svelte",
"chars": 354,
"preview": "<script lang=\"ts\">\n\timport { type LabelProps as Props, label } from '.';\n\n\tlet { children, color = 'gray', show = true, "
},
{
"path": "src/lib/forms/label/index.ts",
"chars": 154,
"preview": "import type { LabelProps } from './type';\nimport Label from './Label.svelte';\nimport { label } from './theme';\n\nexport {"
},
{
"path": "src/lib/forms/label/theme.ts",
"chars": 1173,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const label = tv({\n\tbase: 'text-sm rtl:text-right font-medium block',\n\tv"
},
{
"path": "src/lib/forms/label/type.ts",
"chars": 329,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLLabelAttributes } from 'svelte/elements';\nimport { type ColorNa"
},
{
"path": "src/lib/forms/radio/Radio.svelte",
"chars": 671,
"preview": "<script lang=\"ts\" generics=\"T\">\n\timport { getContext } from 'svelte';\n\timport Label from '../label/Label.svelte';\n\timpor"
},
{
"path": "src/lib/forms/radio/index.ts",
"chars": 191,
"preview": "import type { RadioProps, RadioColorType } from './type';\nimport Radio from './Radio.svelte';\nimport { radio } from './t"
},
{
"path": "src/lib/forms/radio/theme.ts",
"chars": 2459,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const radio = tv({\n\tslots: {\n\t\tinput:\n\t\t\t'relative flex items-center w-4"
},
{
"path": "src/lib/forms/radio/type.ts",
"chars": 627,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\n\ntype RadioColorType "
},
{
"path": "src/lib/forms/radio-button/RadioButton.svelte",
"chars": 648,
"preview": "<script lang=\"ts\" generics=\"T\">\n\timport Button from '$lib/buttons/Button.svelte';\n\timport { type RadioButtonProps as Pro"
},
{
"path": "src/lib/forms/radio-button/index.ts",
"chars": 196,
"preview": "import type { RadioButtonProps } from './type';\nimport RadioButton from './RadioButton.svelte';\nimport { radioButton } f"
},
{
"path": "src/lib/forms/radio-button/theme.ts",
"chars": 161,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const radioButton = tv({\n\tbase: '',\n\tvariants: {\n\t\tinline: {\n\t\t\ttrue: 'i"
},
{
"path": "src/lib/forms/radio-button/type.ts",
"chars": 478,
"preview": "import type { Snippet } from 'svelte';\nimport type { SizeType, ColorName } from '$lib/types';\nimport type { HTMLInputAtt"
},
{
"path": "src/lib/forms/range/Range.svelte",
"chars": 389,
"preview": "<script lang=\"ts\">\n\timport { range, type RangeProps as Props } from './';\n\n\tlet {\n\t\tvalue = $bindable(),\n\t\tappearance = "
},
{
"path": "src/lib/forms/range/index.ts",
"chars": 191,
"preview": "import type { RangeProps, RangeColorType } from './type';\nimport Range from './Range.svelte';\nimport { range } from './t"
},
{
"path": "src/lib/forms/range/theme.ts",
"chars": 1226,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const range = tv({\n\tbase: 'w-full bg-gray-200 rounded-lg cursor-pointer "
},
{
"path": "src/lib/forms/range/type.ts",
"chars": 513,
"preview": "import type { HTMLInputAttributes } from 'svelte/elements';\n\ntype RangeColorType =\n\t| 'gray'\n\t| 'red'\n\t| 'blue'\n\t| 'indi"
},
{
"path": "src/lib/forms/search/Search.svelte",
"chars": 904,
"preview": "<script lang=\"ts\" generics=\"T\">\n\timport { type SearchProps as Props, search } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tinputClass"
},
{
"path": "src/lib/forms/search/index.ts",
"chars": 161,
"preview": "import type { SearchProps } from './type';\nimport Search from './Search.svelte';\nimport { search } from './theme';\n\nexpo"
},
{
"path": "src/lib/forms/search/theme.ts",
"chars": 958,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const search = tv({\n\tslots: {\n\t\tbase: 'relative w-full',\n\t\tleftDiv: 'abs"
},
{
"path": "src/lib/forms/search/type.ts",
"chars": 307,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\n\ninterface SearchProp"
},
{
"path": "src/lib/forms/select/Select.svelte",
"chars": 663,
"preview": "<script lang=\"ts\" generics=\"T\">\n\timport { type SelectProps as Props, select as selectCls } from '.';\n\n\tlet {\n\t\tchildren,"
},
{
"path": "src/lib/forms/select/index.ts",
"chars": 278,
"preview": "import type { SelectProps, SelectOptionType, MultiSelectProps, SelectSize } from './type';\nimport Select from './Select."
},
{
"path": "src/lib/forms/select/theme.ts",
"chars": 736,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const select = tv({\n\tbase: 'block w-full',\n\tvariants: {\n\t\tunderline: {\n\t"
},
{
"path": "src/lib/forms/select/type.ts",
"chars": 767,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLSelectAttributes, HTMLAttributes } from 'svelte/elements';\n\ntyp"
},
{
"path": "src/lib/forms/textarea/Textarea.svelte",
"chars": 1019,
"preview": "<script lang=\"ts\">\n\timport { type TextareaProps as Props, textarea } from '.';\n\n\tlet {\n\t\theader,\n\t\tfooter,\n\t\tvalue = $bi"
},
{
"path": "src/lib/forms/textarea/index.ts",
"chars": 175,
"preview": "import type { TextareaProps } from './type';\nimport Textarea from './Textarea.svelte';\nimport { textarea } from './theme"
},
{
"path": "src/lib/forms/textarea/theme.ts",
"chars": 1116,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const textarea = tv({\n\tslots: {\n\t\tbase: 'block text-sm border-0 px-0 bg-"
},
{
"path": "src/lib/forms/textarea/type.ts",
"chars": 397,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLTextareaAttributes } from 'svelte/elements';\n\ninterface Textare"
},
{
"path": "src/lib/forms/toggle/Toggle.svelte",
"chars": 810,
"preview": "<script lang=\"ts\">\n\timport { Label } from '../label';\n\timport { type ToggleProps as Props, toggle } from './index';\n\n\tle"
},
{
"path": "src/lib/forms/toggle/index.ts",
"chars": 192,
"preview": "import type { ToggleProps, ToggleColor } from './type';\nimport Toggle from './Toggle.svelte';\nimport { toggle } from './"
},
{
"path": "src/lib/forms/toggle/theme.ts",
"chars": 3517,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const toggle = tv({\n\tslots: {\n\t\tspan: \"me-3 shrink-0 bg-gray-200 rounded"
},
{
"path": "src/lib/forms/toggle/type.ts",
"chars": 780,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLInputAttributes } from 'svelte/elements';\n\ntype SizeType = 'def"
},
{
"path": "src/lib/gallery/Gallery.svelte",
"chars": 668,
"preview": "<script lang=\"ts\">\n\timport { type GalleryProps as Props, type ImgType, gallery } from '.';\n\n\tlet { children, items = [],"
},
{
"path": "src/lib/gallery/index.ts",
"chars": 191,
"preview": "import type { GalleryProps, ImgType } from './type';\nimport Gallery from './Gallery.svelte';\nimport { gallery } from './"
},
{
"path": "src/lib/gallery/theme.ts",
"chars": 154,
"preview": "import { tv } from 'tailwind-variants';\nconst gallery = tv({\n\tslots: {\n\t\timage: 'h-auto max-w-full rounded-lg',\n\t\tdiv: '"
},
{
"path": "src/lib/gallery/type.ts",
"chars": 312,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLImgAttributes } from 'svelte/elements';\n\ntype ImgType = {\n\tsrc?"
},
{
"path": "src/lib/index.ts",
"chars": 2230,
"preview": "export * from './uiHelpers.svelte';\nexport * from './accordion';\nexport * from './alert';\nexport * from './avatar';\nexpo"
},
{
"path": "src/lib/indicator/Indicator.svelte",
"chars": 558,
"preview": "<script lang=\"ts\">\n\timport { indicator, type IndicatorProps as Props } from './index';\n\n\tlet {\n\t\tchildren,\n\t\tcolor = 'pr"
},
{
"path": "src/lib/indicator/index.ts",
"chars": 182,
"preview": "import type { IndicatorProps } from './type';\nimport Indicator from './Indicator.svelte';\nimport { indicator } from './t"
},
{
"path": "src/lib/indicator/theme.ts",
"chars": 3398,
"preview": "import { tv } from 'tailwind-variants';\n\nconst indicator = tv({\n\tslots: {\n\t\tbase: 'flex-shrink-0'\n\t},\n\tvariants: {\n\t\tcol"
},
{
"path": "src/lib/indicator/type.ts",
"chars": 901,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\n\ntype ColorType =\n\t| 'prim"
},
{
"path": "src/lib/kbd/Kbd.svelte",
"chars": 299,
"preview": "<script lang=\"ts\">\n\timport { twMerge } from 'tailwind-merge';\n\timport { kbd, type KbdProps as Props } from '.';\n\n\tlet { "
},
{
"path": "src/lib/kbd/index.ts",
"chars": 140,
"preview": "import type { KbdProps } from './type';\nimport Kbd from './Kbd.svelte';\nimport { kbd } from './theme';\n\nexport { Kbd, kb"
},
{
"path": "src/lib/kbd/theme.ts",
"chars": 217,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const kbd = tv({\n\tbase: 'text-xs font-semibold text-gray-800 bg-gray-100"
},
{
"path": "src/lib/kbd/type.ts",
"chars": 236,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAttributes } from 'svelte/elements';\n\ninterface KbdProps extend"
},
{
"path": "src/lib/list-group/Listgroup.svelte",
"chars": 969,
"preview": "<script lang=\"ts\">\n\timport { setContext } from 'svelte';\n\timport ListgroupItem from './ListgroupItem.svelte';\n\timport { "
},
{
"path": "src/lib/list-group/ListgroupItem.svelte",
"chars": 1783,
"preview": "<script lang=\"ts\">\n\timport { getContext } from 'svelte';\n\timport { twMerge } from 'tailwind-merge';\n\timport { tv } from "
},
{
"path": "src/lib/list-group/index.ts",
"chars": 374,
"preview": "import type { ListgroupProps, ListgroupItemProps, ListGroupItemType } from './type';\nimport Listgroup from './Listgroup."
},
{
"path": "src/lib/list-group/theme.ts",
"chars": 1104,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const listGroup = tv({\n\tbase: 'bg-white dark:bg-gray-800 text-gray-500 d"
},
{
"path": "src/lib/list-group/type.ts",
"chars": 1159,
"preview": "import type { Snippet } from 'svelte';\nimport type { HTMLAnchorAttributes } from 'svelte/elements';\nimport type { Compon"
},
{
"path": "src/lib/mega-menu/MegaMenu.svelte",
"chars": 781,
"preview": "<script lang=\"ts\">\n\timport { type MegaMenuProps as Props, megamenu } from '.';\n\n\tlet {\n\t\tchildren,\n\t\tfooter,\n\t\titems = ["
},
{
"path": "src/lib/mega-menu/index.ts",
"chars": 175,
"preview": "import type { MegaMenuProps } from './type';\nimport MegaMenu from './MegaMenu.svelte';\nimport { megamenu } from './theme"
},
{
"path": "src/lib/mega-menu/theme.ts",
"chars": 392,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const megamenu = tv({\n\tslots: {\n\t\tbase: 'w-full border rounded-lg',\n\t\tdi"
},
{
"path": "src/lib/mega-menu/type.ts",
"chars": 496,
"preview": "import type { Snippet } from 'svelte';\nimport type { LinkType } from '../types';\nimport type { HTMLAttributes } from 'sv"
},
{
"path": "src/lib/modal/Modal.svelte",
"chars": 2441,
"preview": "<script lang=\"ts\">\n\timport type { ParamsType } from '$lib/types';\n\timport CloseButton from '$lib/utils/CloseButton.svelt"
},
{
"path": "src/lib/modal/index.ts",
"chars": 154,
"preview": "import type { ModalProps } from './type';\nimport Modal from './Modal.svelte';\nimport { modal } from './theme';\n\nexport {"
},
{
"path": "src/lib/modal/theme.ts",
"chars": 1779,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const modal = tv({\n\tslots: {\n\t\tbase: 'fixed top-0 start-0 end-0 h-modal "
}
]
// ... and 1939 more files (download for full content)
About this extraction
This page contains the full source code of the shinokada/svelte-5-ui-lib GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 2139 files (3.8 MB), approximately 1.1M tokens, and a symbol index with 276 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.