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 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 { 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 ================================================ %sveltekit.head%
%sveltekit.body%
================================================ 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 ================================================
{@render children()}
================================================ FILE: src/lib/accordion/AccordionItem.svelte ================================================

{#if open}
{@render children()}
{/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; classActive?: string; classInactive?: string; isSingle?: boolean; } interface AccordionProps extends HTMLAttributes { children: Snippet; flush?: boolean; isSingle?: boolean; activeClass?: string; inactiveClass?: string; defaultClass?: string; classActive?: string; classInactive?: string; class?: string; } interface AccordionItemProps extends HTMLAttributes { 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 ================================================ {#if alertStatus} {/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 { 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 ================================================ {#if !src || !!href || children || dot} {#if src} {:else if children} {@render children()} {:else} {/if} {#if dot} {/if} {:else} {/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 { 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 ================================================ {#if badgeStatus}
{#if href} {@render children()} {:else} {@render children()} {/if} {#if dismissable} {#if icon} {:else if onclick} {:else} { badgeStatus = false; }} /> {/if} {/if}
{/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 { 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 ================================================ {#if bannerStatus}
{#if header} {@render header()} {/if}
{@render children()}
{#if dismissable}
{ bannerStatus = false; }} />
{/if}
{/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 { 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 ================================================
{#if header} {@render header()} {/if}
{@render children()}
================================================ FILE: src/lib/bottom-navigation/BottomNavHeader.svelte ================================================
{@render children()}
================================================ FILE: src/lib/bottom-navigation/BottomNavHeaderItem.svelte ================================================ ================================================ FILE: src/lib/bottom-navigation/BottomNavItem.svelte ================================================ {#if href} {@render children()} {btnName} {:else} {/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 { 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 ================================================ ================================================ FILE: src/lib/breadcrumb/BreadcrumbItem.svelte ================================================
  • {#if home} {#if icon} {@render icon()} {:else} {/if} {@render children()} {:else} {#if icon} {@render icon()} {:else} {/if} {#if href} {@render children()} {:else} {@render children()} {/if} {/if}
    • ================================================ 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 { 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 ================================================
    {@render children()}
    ================================================ 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 ================================================ {#if href} {@render children()} {:else if tag === 'button'} {:else} {@render children()} {/if} ================================================ FILE: src/lib/buttons/GradientButton.svelte ================================================ {#if outline}
    {:else} {/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 & Omit; 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 ================================================ {#snippet childSlot()} {#if img} {img.alt}
    {@render children()}
    {:else}
    {@render children()}
    {/if} {/snippet} {#if href} {@render childSlot()} {:else}
    {@render childSlot()}
    {/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)); export { type CardProps }; ================================================ FILE: src/lib/chart/Chart.svelte ================================================
    ================================================ 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 ================================================ import type { ChartProps } from './type'; import Chart from './Chart.svelte'; export { Chart, type ChartProps }; ================================================ FILE: src/lib/chart/type.ts ================================================ import type { ApexOptions } from 'apexcharts'; interface ChartProps { options: ApexOptions; class?: string; } export { type ChartProps }; ================================================ FILE: src/lib/darkmode/Darkmode.svelte ================================================ ================================================ FILE: src/lib/darkmode/index.ts ================================================ import type { DarkmodeProps } from './type'; import Darkmode from './Darkmode.svelte'; import { darkmode } from './theme'; export { Darkmode, darkmode, type DarkmodeProps }; ================================================ FILE: src/lib/darkmode/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const darkmode = tv({ base: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 focus:ring-1' }); ================================================ FILE: src/lib/darkmode/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLButtonAttributes } from 'svelte/elements'; interface DarkmodeProps extends HTMLButtonAttributes { class?: string; lightIcon?: Snippet; darkIcon?: Snippet; size?: 'sm' | 'md' | 'lg'; ariaLabel?: string; } export { type DarkmodeProps }; ================================================ FILE: src/lib/device-mockups/Android.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/DefaultMockup.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/Desktop.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/DeviceMockup.svelte ================================================ {@render children()} ================================================ FILE: src/lib/device-mockups/Ios.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/Laptop.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/Smartwatch.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/Tablet.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/device-mockups/index.ts ================================================ import type { AndroidProps, DefaultMockupProps, DeviceMockupProps, IosProps, SmartwatchProps, TabletProps, MockupBaseProps } from './type'; import Android from './Android.svelte'; import DefaultMockup from './DefaultMockup.svelte'; import Desktop from './Desktop.svelte'; import DeviceMockup from './DeviceMockup.svelte'; import Ios from './Ios.svelte'; import Laptop from './Laptop.svelte'; import Smartwatch from './Smartwatch.svelte'; import Tablet from './Tablet.svelte'; import { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet } from './theme'; export { Android, DefaultMockup, Desktop, DeviceMockup, type DeviceMockupProps, Ios, Laptop, Smartwatch, Tablet, android, defaultMockup, desktop, ios, laptop, smartwatch, tablet, type AndroidProps, type DefaultMockupProps, type IosProps, type SmartwatchProps, type TabletProps, type MockupBaseProps }; ================================================ FILE: src/lib/device-mockups/theme.ts ================================================ import { tv } from 'tailwind-variants'; // Android const android = tv({ slots: { div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl', slot: 'rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800', top: 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute', leftTop: 'h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg', leftMid: 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg', leftBot: 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg', right: 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg' } }); // DefaultMockup const defaultMockup = tv({ slots: { div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]', slot: 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800', top: 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg', leftTop: 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg', leftBot: 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg', right: 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg' } }); // Desktop const desktop = tv({ slots: { inner: 'rounded-xl overflow-hidden h-[140px] md:h-[262px]', bot: 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]', botUnder: 'relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]', div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]' } }); // ios const ios = tv({ slots: { div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl', slot: 'rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800', top: 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute', leftTop: 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg', leftBot: 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg', right: 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg' } }); // laptop const laptop = tv({ slots: { div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]', inner: 'rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800', bot: 'relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]', botCen: 'absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800' } }); // smartwatch const smartwatch = tv({ slots: { div: 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]', slot: 'rounded-[2rem] overflow-hidden h-[193px] w-[188px]', rightTop: 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg', rightBot: 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg', top: 'relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]', bot: 'relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]' } }); // tablet const tablet = tv({ slots: { div: 'relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]', slot: 'rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800', leftTop: 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg', leftMid: 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg', leftBot: 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg', right: 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg' } }); export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet }; ================================================ FILE: src/lib/device-mockups/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import type { DeviceVariantType } from '$lib/types'; interface DeviceMockupProps { children: Snippet; device?: DeviceVariantType; } interface MockupBaseProps extends HTMLAttributes { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; } interface AndroidProps { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; div5Class?: string; div6Class?: string; div7Class?: string; } interface DefaultMockupProps { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; div5Class?: string; div6Class?: string; } interface IosProps { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; div5Class?: string; div6Class?: string; } interface SmartwatchProps { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; div5Class?: string; div6Class?: string; } interface TabletProps { children?: Snippet; divClass?: string; div2Class?: string; div3Class?: string; div4Class?: string; div5Class?: string; div6Class?: string; } export { type DeviceMockupProps, type AndroidProps, type DefaultMockupProps, type IosProps, type SmartwatchProps, type TabletProps, type MockupBaseProps }; ================================================ FILE: src/lib/drawer/Drawer.svelte ================================================ {#if drawerStatus} {#if backdrop && activateClickOutside} {:else if backdrop && !activateClickOutside} {:else if !backdrop && activateClickOutside} {/if}
    {@render children()}
    {/if} ================================================ FILE: src/lib/drawer/Drawerhead.svelte ================================================
    {#if children} {@render children()} {/if} {#if closeIcon} {@render closeIcon()} {:else} {/if}
    ================================================ FILE: src/lib/drawer/index.ts ================================================ import type { DrawerProps, DrawerheadProps } from './type'; import Drawer from './Drawer.svelte'; import Drawerhead from './Drawerhead.svelte'; import { drawer, drawerhead } from './theme'; export { Drawer, drawer, Drawerhead, drawerhead, type DrawerProps, type DrawerheadProps }; ================================================ FILE: src/lib/drawer/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const drawer = tv({ slots: { base: 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800', backdrop: 'fixed top-0 start-0 z-50 w-full h-full' }, variants: { position: { fixed: { base: 'fixed' }, absolute: { base: 'absolute' } }, placement: { left: { base: 'inset-y-0 start-0' }, right: { base: 'inset-y-0 end-0' }, top: { base: 'inset-x-0 top-0' }, bottom: { base: 'inset-x-0 bottom-0' } }, width: { default: { base: 'w-80' }, full: { base: 'w-full' }, half: { base: 'w-1/2' } }, backdrop: { true: { backdrop: 'bg-gray-900 bg-opacity-75' } } }, defaultVariants: { position: 'fixed', placement: 'left', width: 'default' } }); export const drawerhead = tv({ slots: { base: 'flex items-center', button: 'ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white', svg: 'h-3 w-3' } }); ================================================ FILE: src/lib/drawer/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements'; import type { TransitionFunc, ParamsType } from '../types'; type WidthType = 'default' | 'full' | 'half' | undefined; type PlacementType = 'left' | 'right' | 'top' | 'bottom' | undefined; type PosisionType = 'fixed' | 'absolute' | undefined; interface DrawerProps extends HTMLAttributes { children: Snippet; drawerStatus: boolean; closeDrawer?: () => void; activateClickOutside?: boolean; position?: PosisionType; width?: WidthType; backdrop?: boolean; backdropClass?: string; placement?: PlacementType; class?: string; params?: ParamsType; transition?: TransitionFunc; } interface DrawerheadProps extends HTMLButtonAttributes { closeIcon?: Snippet; children?: Snippet; buttonClass?: string; svgClass?: string; class?: string; } export { type DrawerProps, type DrawerheadProps }; ================================================ FILE: src/lib/dropdown/Dropdown.svelte ================================================ {#if dropdownStatus}
    {@render children()}
    {/if} ================================================ FILE: src/lib/dropdown/DropdownDivider.svelte ================================================
    ================================================ FILE: src/lib/dropdown/DropdownFooter.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/dropdown/DropdownHeader.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/dropdown/DropdownLi.svelte ================================================
  • {#if href} {@render children()} {:else} {@render children()} {/if}
    • ================================================ FILE: src/lib/dropdown/DropdownUl.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/dropdown/index.ts ================================================ import type { DropdownProps, DropdownDividerProps, DropdownLiProps, DropdownUlProps, DropdownHeaderProps, DropdownFooterProps } from './type'; import Dropdown from './Dropdown.svelte'; import DropdownDivider from './DropdownDivider.svelte'; import DropdownUl from './DropdownUl.svelte'; import DropdownLi from './DropdownLi.svelte'; import DropdownHeader from './DropdownHeader.svelte'; import DropdownFooter from './DropdownFooter.svelte'; import { dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter } from './theme'; export { Dropdown, DropdownDivider, DropdownUl, DropdownLi, DropdownHeader, DropdownFooter, dropdown, dropdowndivider, dropdownli, dropdownul, dropdownHeader, dropdownFooter, type DropdownProps, type DropdownDividerProps, type DropdownLiProps, type DropdownUlProps, type DropdownHeaderProps, type DropdownFooterProps }; ================================================ FILE: src/lib/dropdown/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const dropdown = tv({ slots: { base: 'z-10 w-44 mt-2 divide-y divide-gray-300 dark:divide-gray-500 overflow-hidden rounded-lg bg-white shadow dark:bg-gray-700', backdrop: 'fixed top-0 start-0 w-full h-full' } }); export const dropdowndivider = tv({ base: 'my-1 h-px bg-gray-100 dark:bg-gray-500' }); export const dropdownHeader = tv({ base: 'px-4 py-3 text-sm text-gray-900 dark:text-white' }); export const dropdownFooter = tv({ base: 'overflow-hidden rounded-b-lg py-1' }); export const dropdownli = tv({ slots: { anchor: 'block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white', activeAnchor: 'block px-4 py-2 text-primary-700 dark:text-primary-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white' } }); export const dropdownul = tv({ base: 'py-2 text-sm text-gray-700 dark:text-gray-200' }); ================================================ FILE: src/lib/dropdown/type.ts ================================================ import type { Snippet } from 'svelte'; import type { ParamsType, TransitionFunc } from '../types'; import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements'; interface DropdownProps extends HTMLAttributes { children: Snippet; dropdownStatus: boolean; closeDropdown?: () => void; divClass?: string; footerClass?: string; headerClass?: string; ulClass?: string; backdropClass?: string; params?: ParamsType; transition?: TransitionFunc; activeUrl?: string; class?: string; } interface DropdownDividerProps extends HTMLAttributes { class?: string; } interface DropdownHeaderProps extends HTMLAttributes { children: Snippet; class?: string; } interface DropdownFooterProps extends HTMLAttributes { children: Snippet; class?: string; } interface DropdownLiProps extends HTMLAnchorAttributes { children: Snippet; aClass?: string; href?: string; activeClass?: string; liClass?: string; } interface DropdownUlProps extends HTMLAttributes { children: Snippet; class?: string; } export { type DropdownProps, type DropdownDividerProps, type DropdownLiProps, type DropdownUlProps, type DropdownHeaderProps, type DropdownFooterProps }; ================================================ FILE: src/lib/footer/Footer.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/footer/FooterBrand.svelte ================================================ {#if href} {#if src} {/if} {#if name} {name} {/if} {#if children} {@render children()} {/if} {:else} {/if} ================================================ FILE: src/lib/footer/FooterCopyright.svelte ================================================ © {year} {#if href} {by} {:else} {by} {/if} {copyrightMessage} ================================================ FILE: src/lib/footer/FooterIcon.svelte ================================================ {#if href} {@render children()} {:else} {@render children()} {/if} ================================================ FILE: src/lib/footer/FooterLi.svelte ================================================
  • {@render children()}
    • ================================================ FILE: src/lib/footer/FooterUl.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/footer/index.ts ================================================ import type { FooterProps, FooterBrandProps, FooterCopyrightProps, FooterIconProps, FooterUlProps, FooterLiProps } from './type'; import Footer from './Footer.svelte'; import FooterBrand from './FooterBrand.svelte'; import FooterCopyright from './FooterCopyright.svelte'; import FooterIcon from './FooterIcon.svelte'; import FooterLi from './FooterLi.svelte'; import FooterUl from './FooterUl.svelte'; import { footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi } from './theme'; export { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLi, FooterUl, footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi, type FooterProps, type FooterBrandProps, type FooterCopyrightProps, type FooterIconProps, type FooterUlProps, type FooterLiProps }; ================================================ FILE: src/lib/footer/theme.ts ================================================ import { tv } from 'tailwind-variants'; const footer = tv({ base: 'bg-white dark:bg-gray-800', variants: { footerType: { default: 'p-4 rounded-lg shadow md:flex md:items-center md:justify-between md:p-6', sitemap: 'bg-gray-800', socialmedia: 'p-4 sm:p-6', logo: 'p-4 rounded-lg shadow md:px-6 md:py-8', sticky: 'fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600' } } }); const footerBrand = tv({ slots: { base: 'flex items-center', span: 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white', img: 'me-3 h-8' } }); const footerCopyright = tv({ slots: { base: 'block text-sm text-gray-500 sm:text-center dark:text-gray-400', link: 'hover:underline', bySpan: 'ms-1' } }); const footerIcon = tv({ base: 'text-gray-500 hover:text-gray-900 dark:hover:text-white' }); const footerUl = tv({ base: 'text-gray-600 dark:text-gray-400' }); const footerLi = tv({ slots: { base: 'me-4 last:me-0 md:me-6', link: 'hover:underline' } }); export { footer, footerBrand, footerCopyright, footerIcon, footerUl, footerLi }; ================================================ FILE: src/lib/footer/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements'; type FooterType = 'default' | 'sticky' | 'sitemap' | 'socialmedia' | 'logo' | undefined; interface FooterProps extends HTMLAttributes { children: Snippet; footerType?: FooterType; class?: string; } interface FooterBrandProps extends HTMLAnchorAttributes { children?: Snippet; aClass?: string; spanClass?: string; imgClass?: string; href?: string; src?: string; alt?: string; name?: string; } interface FooterCopyrightProps extends HTMLAnchorAttributes { spanClass?: string; aClass?: string; href?: string; by?: string; copyrightMessage?: string; year?: number | undefined; } interface FooterIconProps extends HTMLAnchorAttributes { children: Snippet; href?: string; ariaLabel?: string; class?: string; } interface FooterUlProps extends HTMLAttributes { children: Snippet; class?: string; } interface FooterLiProps extends HTMLAnchorAttributes { children: Snippet; liClass?: string; aClass?: string; href?: string; } export { type FooterProps, type FooterBrandProps, type FooterCopyrightProps, type FooterIconProps, type FooterUlProps, type FooterLiProps }; ================================================ FILE: src/lib/forms/checkbox/Checkbox.svelte ================================================ {#if choices.length > 0} {#each choices as { value, checkboxLabel }, i} {/each} {:else} {/if} ================================================ FILE: src/lib/forms/checkbox/index.ts ================================================ import type { CheckboxProps, CheckboxItem, ColorType } from './type'; import Checkbox from './Checkbox.svelte'; import { checkbox } from './theme'; export { Checkbox, checkbox, type CheckboxProps, type CheckboxItem, type ColorType }; ================================================ FILE: src/lib/forms/checkbox/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const checkbox = tv({ slots: { base: 'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded', label: '' }, variants: { color: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: { base: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600' }, secondary: { base: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600' }, gray: { base: 'text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600' }, red: { base: 'text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600' }, orange: { base: 'text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600' }, amber: { base: 'text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600' }, yellow: { base: 'text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400' }, lime: { base: 'text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700' }, green: { base: 'text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600' }, emerald: { base: 'text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600' }, teal: { base: 'text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600' }, cyan: { base: 'text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600' }, sky: { base: 'text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600' }, blue: { base: 'text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700' }, indigo: { base: 'text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700' }, violet: { base: 'text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600' }, purple: { base: 'text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600' }, fuchsia: { base: 'text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600' }, pink: { base: 'text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600' }, rose: { base: 'text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600' } }, tinted: { true: { base: 'dark:bg-gray-600 dark:border-gray-500' }, false: { base: 'dark:bg-gray-700 dark:border-gray-600' } }, custom: { true: { base: 'sr-only peer' } }, rounded: { true: { base: 'rounded' } }, inline: { true: { label: 'inline-flex', false: 'flex items-center' } } }, defaultVariants: { color: 'primary' } }); ================================================ FILE: src/lib/forms/checkbox/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; type CheckboxItem = { value: string; checkboxLabel?: string; isChecked?: boolean; }; type ColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface CheckboxProps extends HTMLInputAttributes { children?: Snippet; aria_describedby?: string; color?: ColorType; custom?: boolean; inline?: boolean; tinted?: boolean; rounded?: boolean; group?: (string | number)[]; choices?: CheckboxItem[]; classLabel?: string; indeterminate?: boolean; class?: string; } export { type CheckboxProps, type CheckboxItem, type ColorType }; ================================================ FILE: src/lib/forms/checkbox-button/CheckboxButton.svelte ================================================ ================================================ FILE: src/lib/forms/checkbox-button/index.ts ================================================ import type { CheckboxButtonProps } from './type'; import CheckboxButton from './CheckboxButton.svelte'; export { CheckboxButton, type CheckboxButtonProps }; ================================================ FILE: src/lib/forms/checkbox-button/theme.ts ================================================ ================================================ FILE: src/lib/forms/checkbox-button/type.ts ================================================ import type { SizeType, ColorName } from '$lib/types'; import type { Snippet } from 'svelte'; interface CheckboxButtonProps { children: Snippet; class?: string; group?: (string | number)[]; value?: string | number; checked?: boolean | undefined; inline?: boolean; pill?: boolean; outline?: boolean; size?: SizeType; color?: ColorName | 'alternative' | 'dark' | 'light'; shadow?: boolean; } export { type CheckboxButtonProps }; ================================================ FILE: src/lib/forms/dropzone/Dropzone.svelte ================================================ ================================================ FILE: src/lib/forms/dropzone/index.ts ================================================ import type { DropzoneProps } from './type'; import { dropzone } from './theme'; import Dropzone from './Dropzone.svelte'; export { Dropzone, dropzone, type DropzoneProps }; ================================================ FILE: src/lib/forms/dropzone/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const dropzone = tv({ base: 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600' }); ================================================ FILE: src/lib/forms/dropzone/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; interface DropzoneProps extends HTMLInputAttributes { children: Snippet; files?: FileList | null; class?: string; } export { type DropzoneProps }; ================================================ FILE: src/lib/forms/fileupload/Fileupload.svelte ================================================ {#if clearable}
    {#if hasFiles} {/if}
    {:else} {/if} ================================================ FILE: src/lib/forms/fileupload/index.ts ================================================ import type { FileuploadProps } from './type'; import Fileupload from './Fileupload.svelte'; import { fileupload } from './theme'; export { Fileupload, fileupload, type FileuploadProps }; ================================================ FILE: src/lib/forms/fileupload/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const fileupload = tv({ slots: { base: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right p-2.5 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:placeholder-gray-400 border-gray-300 dark:border-gray-600 text-sm rounded-lg border !p-0 dark:text-gray-400', wrapper: 'relative w-full', right: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5' }, variants: { size: { sm: { base: 'text-xs ps-9 pe-9 p-2' }, md: { base: 'text-sm ps-10 pe-10 p-2.5' }, lg: { base: 'sm:text-base ps-11 pe-11 p-3' } } } }); ================================================ FILE: src/lib/forms/fileupload/type.ts ================================================ import type { HTMLInputAttributes } from 'svelte/elements'; import type { InputProps } from '$lib'; interface FileuploadProps extends Omit { files?: FileList; size?: InputProps['size']; color?: InputProps['color']; clearable?: boolean; class?: string; } export { type FileuploadProps }; ================================================ FILE: src/lib/forms/floating-label-input/FloatingLabelInput.svelte ================================================
    ================================================ FILE: src/lib/forms/floating-label-input/index.ts ================================================ import type { FloatingLabelInputProps } from './type'; import FloatingLabelInput from './FloatingLabelInput.svelte'; import { floatingLabelInput } from './theme'; export { FloatingLabelInput, floatingLabelInput, type FloatingLabelInputProps }; ================================================ FILE: src/lib/forms/floating-label-input/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const floatingLabelInput = tv({ slots: { base: 'relative', input: 'block w-full text-sm text-gray-900 bg-transparent appearance-none dark:text-white focus:outline-none focus:ring-0 peer', label: 'absolute text-sm duration-300 transform scale-75 z-10 origin-left rtl:origin-right peer-placeholder-shown:scale-100 peer-focus:scale-75' }, variants: { inputStyle: { filled: { base: 'relative', input: 'rounded-t-lg border-0 border-b-2 bg-gray-50 dark:bg-gray-700', label: '-translate-y-4 start-2.5 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-4' }, outlined: { base: 'relative', input: 'rounded-lg border', label: '-translate-y-4 bg-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 start-1' }, standard: { base: 'relative z-0', input: 'border-0 border-b-2', label: '-translate-y-6 -z-10 peer-focus:start-0 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-6' } }, size: { small: {}, default: {} }, color: { default: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600', label: 'text-gray-500 dark:text-gray-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500' }, primary: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-primary-500 focus:border-primary-600', label: 'text-primary-500 dark:text-primary-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500' }, secondary: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-secondary-500 focus:border-secondary-600', label: 'text-secondary-500 dark:text-secondary-400 peer-focus:text-secondary-600 peer-focus:dark:text-secondary-500' }, gray: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-gray-500 focus:border-gray-600', label: 'text-gray-500 dark:text-gray-400 peer-focus:text-gray-600 peer-focus:dark:text-gray-500' }, red: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-red-500 focus:border-red-600', label: 'text-red-500 dark:text-red-400 peer-focus:text-red-600 peer-focus:dark:text-red-500' }, orange: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-orange-500 focus:border-orange-600', label: 'text-orange-500 dark:text-orange-400 peer-focus:text-orange-600 peer-focus:dark:text-orange-500' }, amber: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-amber-500 focus:border-amber-600', label: 'text-amber-500 dark:text-amber-400 peer-focus:text-amber-600 peer-focus:dark:text-amber-500' }, yellow: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-yellow-500 focus:border-yellow-600', label: 'text-yellow-500 dark:text-yellow-400 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500' }, lime: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-lime-500 focus:border-lime-600', label: 'text-lime-500 dark:text-lime-400 peer-focus:text-lime-600 peer-focus:dark:text-lime-500' }, green: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-green-500 focus:border-green-600', label: 'text-green-500 dark:text-green-400 peer-focus:text-green-600 peer-focus:dark:text-green-500' }, emerald: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-emerald-500 focus:border-emerald-600', label: 'text-emerald-500 dark:text-emerald-400 peer-focus:text-emerald-600 peer-focus:dark:text-emerald-500' }, teal: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-teal-500 focus:border-teal-600', label: 'text-teal-500 dark:text-teal-400 peer-focus:text-teal-600 peer-focus:dark:text-teal-500' }, cyan: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-cyan-500 focus:border-cyan-600', label: 'text-cyan-500 dark:text-cyan-400 peer-focus:text-cyan-600 peer-focus:dark:text-cyan-500' }, sky: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-sky-500 focus:border-sky-600', label: 'text-sky-500 dark:text-sky-400 peer-focus:text-sky-600 peer-focus:dark:text-sky-500' }, blue: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600', label: 'text-blue-500 dark:text-blue-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500' }, indigo: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-indigo-500 focus:border-indigo-600', label: 'text-indigo-500 dark:text-indigo-400 peer-focus:text-indigo-600 peer-focus:dark:text-indigo-500' }, violet: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-violet-500 focus:border-violet-600', label: 'text-violet-600 dark:text-violet-500 peer-focus:text-violet-600 peer-focus:dark:text-violet-500' }, purple: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-purple-500 focus:border-purple-600', label: 'text-purple-600 dark:text-purple-500 peer-focus:text-purple-600 peer-focus:dark:text-purple-500' }, fuchsia: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-fuchsia-500 focus:border-fuchsia-600', label: 'text-fuchsia-600 dark:text-fuchsia-500 peer-focus:text-fuchsia-600 peer-focus:dark:text-fuchsia-500' }, pink: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-pink-500 focus:border-pink-600', label: 'text-pink-600 dark:text-pink-500 peer-focus:text-pink-600 peer-focus:dark:text-pink-500' }, rose: { input: 'border-gray-300 dark:border-gray-600 dark:focus:border-rose-500 focus:border-rose-600', label: 'text-rose-600 dark:text-rose-500 peer-focus:text-rose-600 peer-focus:dark:text-rose-500' } } }, compoundVariants: [ { inputStyle: 'filled', size: 'small', class: { input: 'px-2.5 pb-1.5 pt-4', label: 'top-3' } }, { inputStyle: 'filled', size: 'default', class: { input: 'px-2.5 pb-2.5 pt-5', label: 'top-4' } }, { inputStyle: 'outlined', size: 'small', class: { input: 'px-2.5 pb-1.5 pt-3', label: 'top-1' } }, { inputStyle: 'outlined', size: 'default', class: { input: 'px-2.5 pb-2.5 pt-4', label: 'top-2' } }, { inputStyle: 'standard', size: 'small', class: { input: 'py-2 px-0', label: 'top-3' } }, { inputStyle: 'standard', size: 'default', class: { input: 'py-2.5 px-0', label: 'top-3' } }, { inputStyle: 'filled', color: 'primary', class: { input: 'dark:focus:border-primary-500 focus:border-primary-600' } } ], defaultVariants: { inputStyle: 'standard', size: 'default', color: 'primary' } }); ================================================ FILE: src/lib/forms/floating-label-input/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; import { type ColorName } from '$lib/types'; interface FloatingLabelInputProps extends Omit { children: Snippet; id?: string; value?: string | number | readonly string[] | undefined; aria_describedby?: string; inputStyle?: 'filled' | 'outlined' | 'standard'; size?: 'small' | 'default'; color?: ColorName | 'default'; divClass?: string; inputClass?: string; labelClass?: string; } export { type FloatingLabelInputProps }; ================================================ FILE: src/lib/forms/helper/Helper.svelte ================================================

    {@render children()}

    ================================================ FILE: src/lib/forms/helper/index.ts ================================================ import type { HelperProps } from './type'; import Helper from './Helper.svelte'; import { helper } from './theme'; export { Helper, helper, type HelperProps }; ================================================ FILE: src/lib/forms/helper/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const helper = tv({ base: 'text-xs font-normal text-gray-500 dark:text-gray-300', variants: { color: { disabled: 'text-gray-400 dark:text-gray-500', primary: 'text-primary-500 dark:text-primary-400', secondary: 'text-secondary-500 dark:text-secondary-400', green: 'text-green-500 dark:text-green-400', emerald: 'text-emerald-500 dark:text-emerald-400', red: 'text-red-500 dark:text-red-400', blue: 'text-blue-500 dark:text-blue-400', yellow: 'text-yellow-500 dark:text-yellow-400', orange: 'text-orange-500 dark:text-orange-400', gray: 'text-gray-500 dark:text-gray-400', teal: 'text-teal-500 dark:text-teal-400', cyan: 'text-cyan-500 dark:text-cyan-400', sky: 'text-sky-500 dark:text-sky-400', indigo: 'text-indigo-500 dark:text-indigo-400', lime: 'text-lime-500 dark:text-lime-400', amber: 'text-amber-500 dark:text-amber-400', violet: 'text-violet-500 dark:text-violet-400', purple: 'text-purple-500 dark:text-purple-400', fuchsia: 'text-fuchsia-500 dark:text-fuchsia-400', pink: 'text-pink-500 dark:text-pink-400', rose: 'text-rose-500 dark:text-rose-400' } } }); ================================================ FILE: src/lib/forms/helper/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import { type ColorName } from '$lib/types'; interface HelperProps extends HTMLAttributes { children: Snippet; class?: string; color?: ColorName | 'disabled'; } export { type HelperProps }; ================================================ FILE: src/lib/forms/input/Input.svelte ================================================ {#snippet inputContent()} {#if left}
    {@render left()}
    {/if} {#if children} {@render children({ ...restProps, class: inputCls() })} {:else} {/if} {#if right}
    {@render right()}
    {/if} {#if clearable && value && `${value}`.length > 0} {/if} {/snippet} {#if group} {@render inputContent()} {:else if right || left}
    {@render inputContent()}
    {:else} {@render inputContent()} {/if} ================================================ FILE: src/lib/forms/input/index.ts ================================================ import type { InputProps, InputValue } from './type'; import Input from './Input.svelte'; import type { SizeType } from '$lib/types'; import { input } from './theme'; function clampSize(s: SizeType) { return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s; } export { Input, input, type InputProps, type InputValue, clampSize }; ================================================ FILE: src/lib/forms/input/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const input = tv({ slots: { base: 'relative w-full', input: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-none', left: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 ps-2.5', right: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5' }, variants: { size: { sm: { input: 'text-xs ps-9 pe-9 p-2' }, md: { input: 'text-sm ps-10 pe-10 p-2.5' }, lg: { input: 'sm:text-base ps-11 pe-11 p-3' } }, color: { default: { input: 'border border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-50 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400' }, tinted: { input: 'border border-gray-300 dark:border-gray-500 bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400' }, primary: { input: 'border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700' }, secondary: { input: 'border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-gray-700' }, green: { input: 'border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700' }, emerald: { input: 'border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-gray-700' }, red: { input: 'border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-gray-700' }, blue: { input: 'border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-gray-700' }, yellow: { input: 'border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-gray-700' }, orange: { input: 'border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-gray-700' }, gray: { input: 'border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-gray-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-gray-500 dark:bg-gray-700' }, teal: { input: 'border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-gray-700' }, cyan: { input: 'border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-gray-700' }, sky: { input: 'border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-gray-700' }, indigo: { input: 'border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-gray-700' }, lime: { input: 'border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-gray-700' }, amber: { input: 'border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-gray-700' }, violet: { input: 'border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-gray-700' }, purple: { input: 'border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-gray-700' }, fuchsia: { input: 'border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-gray-700' }, pink: { input: 'border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-gray-700' }, rose: { input: 'border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700' } }, group: { false: { input: 'rounded-lg' }, true: { input: 'first:rounded-s-lg last:rounded-e-lg [&:not(:first-child)]:-ms-px' } } }, defaultVariants: { size: 'md', color: 'default' } }); ================================================ FILE: src/lib/forms/input/type.ts ================================================ import type { HTMLInputAttributes } from 'svelte/elements'; import type { FormSizeType, ColorName } from '$lib/types'; import type { Snippet } from 'svelte'; type InputValue = string | number | string[] | undefined; interface InputProps extends Omit { children?: Snippet< [{ class: string } & Omit, 'children' | 'left' | 'right' | 'size'>] >; left?: Snippet; right?: Snippet; size?: FormSizeType; value?: T; clearable?: boolean; color?: ColorName | 'default' | 'tinted'; classLeft?: string; classRight?: string; class?: string; divClass?: string; } export { type InputProps, type InputValue }; ================================================ FILE: src/lib/forms/input-addon/InputAddon.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/forms/input-addon/index.ts ================================================ import type { InputAddonProps } from './type'; import InputAddon from './InputAddon.svelte'; export { InputAddon, type InputAddonProps }; ================================================ FILE: src/lib/forms/input-addon/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface InputAddonProps extends HTMLAttributes { children: Snippet; class?: string; size?: 'sm' | 'md' | 'lg' | undefined; } export { type InputAddonProps }; ================================================ FILE: src/lib/forms/label/Label.svelte ================================================ {#if show} {:else} {@render children()} {/if} ================================================ FILE: src/lib/forms/label/index.ts ================================================ import type { LabelProps } from './type'; import Label from './Label.svelte'; import { label } from './theme'; export { Label, label, type LabelProps }; ================================================ FILE: src/lib/forms/label/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const label = tv({ base: 'text-sm rtl:text-right font-medium block', variants: { color: { disabled: 'text-gray-500 dark:text-gray-500', primary: 'text-primary-700 dark:text-primary-500', secondary: 'text-secondary-700 dark:text-secondary-500', green: 'text-green-700 dark:text-green-500', emerald: 'text-emerald-700 dark:text-emerald-500', red: 'text-red-700 dark:text-red-500', blue: 'text-blue-700 dark:text-blue-500', yellow: 'text-yellow-700 dark:text-yellow-500', orange: 'text-orange-700 dark:text-orange-500', gray: 'text-gray-700 dark:text-gray-200', teal: 'text-teal-700 dark:text-teal-500', cyan: 'text-cyan-700 dark:text-cyan-500', sky: 'text-sky-700 dark:text-sky-500', indigo: 'text-indigo-700 dark:text-indigo-500', lime: 'text-lime-700 dark:text-lime-500', amber: 'text-amber-700 dark:text-amber-500', violet: 'text-violet-700 dark:text-violet-500', purple: 'text-purple-700 dark:text-purple-500', fuchsia: 'text-fuchsia-700 dark:text-fuchsia-500', pink: 'text-pink-700 dark:text-pink-500', rose: 'text-rose-700 dark:text-rose-500' } } }); ================================================ FILE: src/lib/forms/label/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLLabelAttributes } from 'svelte/elements'; import { type ColorName } from '$lib/types'; interface LabelProps extends HTMLLabelAttributes { children: Snippet; color?: ColorName | 'disabled'; show?: boolean; class?: string; for?: string; } export { type LabelProps }; ================================================ FILE: src/lib/forms/radio/Radio.svelte ================================================ ================================================ FILE: src/lib/forms/radio/index.ts ================================================ import type { RadioProps, RadioColorType } from './type'; import Radio from './Radio.svelte'; import { radio } from './theme'; export { Radio, radio, type RadioProps, type RadioColorType }; ================================================ FILE: src/lib/forms/radio/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const radio = tv({ slots: { input: 'relative flex items-center w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2', label: 'flex items-center' }, variants: { color: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: { input: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600' }, secondary: { input: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600' }, gray: { input: 'text-gray-600 focus:ring-gray-500 dark:focus:ring-gray-600' }, red: { input: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600' }, orange: { input: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600' }, amber: { input: 'text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-600' }, yellow: { input: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600' }, lime: { input: 'text-lime-600 focus:ring-lime-500 dark:focus:ring-lime-600' }, green: { input: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600' }, emerald: { input: 'text-emerald-600 focus:ring-emerald-500 dark:focus:ring-emerald-600' }, teal: { input: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600' }, cyan: { input: 'text-cyan-600 focus:ring-cyan-500 dark:focus:ring-cyan-600' }, sky: { input: 'text-sky-600 focus:ring-sky-500 dark:focus:ring-sky-600' }, blue: { input: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600' }, indigo: { input: 'text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600' }, violet: { input: 'text-violet-600 focus:ring-violet-500 dark:focus:ring-violet-600' }, purple: { input: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600' }, fuchsia: { input: 'text-fuchsia-600 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-600' }, pink: { input: 'text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600' }, rose: { input: 'text-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600' } }, tinted: { true: { input: 'dark:bg-gray-600 dark:border-gray-500' }, false: { input: 'dark:bg-gray-700 dark:border-gray-600' } } }, defaultVariants: { color: 'primary' } }); ================================================ FILE: src/lib/forms/radio/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; type RadioColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface RadioProps extends HTMLInputAttributes { children: Snippet; aria_describedby?: string; color?: RadioColorType; group?: T; value?: T; inputClass?: string; labelClass?: string; hidden?: boolean; } export { type RadioProps, type RadioColorType }; ================================================ FILE: src/lib/forms/radio-button/RadioButton.svelte ================================================ ================================================ FILE: src/lib/forms/radio-button/index.ts ================================================ import type { RadioButtonProps } from './type'; import RadioButton from './RadioButton.svelte'; import { radioButton } from './theme'; export { RadioButton, radioButton, type RadioButtonProps }; ================================================ FILE: src/lib/forms/radio-button/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const radioButton = tv({ base: '', variants: { inline: { true: 'inline-flex', false: 'flex' } } }); ================================================ FILE: src/lib/forms/radio-button/type.ts ================================================ import type { Snippet } from 'svelte'; import type { SizeType, ColorName } from '$lib/types'; import type { HTMLInputAttributes } from 'svelte/elements'; interface RadioButtonProps extends HTMLInputAttributes { children: Snippet; group?: T; value?: T; inline?: boolean; pill?: boolean; outline?: boolean; buttonSize?: SizeType | undefined; color?: ColorName | 'alternative' | 'dark' | 'light'; shadow?: boolean; class?: string; } export { type RadioButtonProps }; ================================================ FILE: src/lib/forms/range/Range.svelte ================================================ ================================================ FILE: src/lib/forms/range/index.ts ================================================ import type { RangeProps, RangeColorType } from './type'; import Range from './Range.svelte'; import { range } from './theme'; export { Range, range, type RangeProps, type RangeColorType }; ================================================ FILE: src/lib/forms/range/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const range = tv({ base: 'w-full bg-gray-200 rounded-lg cursor-pointer dark:bg-gray-700', variants: { size: { sm: 'h-1 range-sm', md: 'h-2', lg: 'h-3 range-lg' }, color: { // other colors do not work gray: '', red: '', blue: '', indigo: '', violet: '', purple: '', fuchsia: '', pink: '', rose: '' }, appearance: { auto: 'range accent-red-500', none: 'appearance-none' } }, compoundVariants: [ { appearance: 'auto', color: 'gray', class: 'accent-gray-500' }, { appearance: 'auto', color: 'red', class: 'accent-red-500' }, { appearance: 'auto', color: 'blue', class: 'accent-blue-500' }, { appearance: 'auto', color: 'indigo', class: 'accent-indigo-500' }, { appearance: 'auto', color: 'violet', class: 'accent-violet-500' }, { appearance: 'auto', color: 'purple', class: 'accent-purple-500' }, { appearance: 'auto', color: 'fuchsia', class: 'accent-fuchsia-500' }, { appearance: 'auto', color: 'pink', class: 'accent-pink-500' }, { appearance: 'auto', color: 'rose', class: 'accent-rose-500' } ] }); ================================================ FILE: src/lib/forms/range/type.ts ================================================ import type { HTMLInputAttributes } from 'svelte/elements'; type RangeColorType = | 'gray' | 'red' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; type AppearanceType = 'auto' | 'none' | undefined; type RangeType = 'sm' | 'md' | 'lg'; interface RangeProps extends HTMLInputAttributes { value?: number | string; appearance?: AppearanceType; color?: RangeColorType; rangeSize?: RangeType; inputClass?: string; } export { type RangeProps, type RangeColorType }; ================================================ FILE: src/lib/forms/search/Search.svelte ================================================
    {#if children}
    {@render children()}
    {/if}
    ================================================ FILE: src/lib/forms/search/index.ts ================================================ import type { SearchProps } from './type'; import Search from './Search.svelte'; import { search } from './theme'; export { Search, search, type SearchProps }; ================================================ FILE: src/lib/forms/search/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const search = tv({ slots: { base: 'relative w-full', leftDiv: 'absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none', icon: 'text-gray-500 dark:text-gray-400', content: 'absolute inset-y-0 end-0 flex items-center text-gray-500 dark:text-gray-400', input: 'block w-full text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' }, variants: { size: { sm: { input: 'text-xs p-2 ps-9 pe-9 ', icon: 'w-3 h-3' // leftDiv: 'ps-2.5', }, md: { input: 'text-sm p-2.5 ps-10 pe-10', icon: 'w-4 h-4' // leftDiv: 'ps-10', }, lg: { input: 'sm:text-base p-3 ps-11 pe-11', icon: 'w-6 h-6' // leftDiv: 'ps-11', } } }, defaultVariants: { size: 'md' } }); ================================================ FILE: src/lib/forms/search/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; interface SearchProps extends Omit { children?: Snippet; inputClass?: string; size?: 'sm' | 'md' | 'lg'; placeholder?: string; value?: T; } export { type SearchProps }; ================================================ FILE: src/lib/forms/select/Select.svelte ================================================ ================================================ FILE: src/lib/forms/select/index.ts ================================================ import type { SelectProps, SelectOptionType, MultiSelectProps, SelectSize } from './type'; import Select from './Select.svelte'; import { select } from './theme'; export { Select, select, type SelectProps, type SelectOptionType, type MultiSelectProps, type SelectSize }; ================================================ FILE: src/lib/forms/select/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const select = tv({ base: 'block w-full', variants: { underline: { true: 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer !px-0', false: 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500' }, size: { sm: 'text-sm p-2', md: 'text-sm p-2.5', lg: 'text-base py-3 px-4' } }, defaultVariants: { underline: false, size: 'md' } }); ================================================ FILE: src/lib/forms/select/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLSelectAttributes, HTMLAttributes } from 'svelte/elements'; type SelectSize = 'sm' | 'md' | 'lg'; type SelectOptionType = { name: string | number; value: T; }; interface SelectProps extends Omit { children?: Snippet; items?: SelectOptionType[]; underline?: boolean; size?: SelectSize; placeholder?: string; class?: string; } interface MultiSelectProps extends HTMLAttributes { children?: Snippet; items?: SelectOptionType[]; value?: T[]; size?: SelectSize; dropdownClass?: string; placeholder?: string; change?: (event: Event) => void; } export { type SelectProps, type SelectOptionType, type MultiSelectProps, type SelectSize }; ================================================ FILE: src/lib/forms/textarea/Textarea.svelte ================================================
    {#if header}
    {@render header()}
    {/if}
    {#if footer}
    {@render footer()}
    {/if}
    ================================================ FILE: src/lib/forms/textarea/index.ts ================================================ import type { TextareaProps } from './type'; import Textarea from './Textarea.svelte'; import { textarea } from './theme'; export { Textarea, type TextareaProps, textarea }; ================================================ FILE: src/lib/forms/textarea/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const textarea = tv({ slots: { base: 'block text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50', wrapper: 'rounded-lg bg-gray-50 dark:bg-gray-600 text-gray-900 dark:placeholder-gray-400 dark:text-white border border-gray-200 dark:border-gray-500', innerWrapper: 'py-2 px-4 bg-white dark:bg-gray-800', headerCls: 'py-2 px-3 border-gray-200 dark:border-gray-500', footerCls: 'py-2 px-3 border-gray-200 dark:border-gray-500' }, variants: { cols: { false: { base: 'w-full', wrapper: 'w-full' } }, wrapped: { false: { base: 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50' } }, hasHeader: { true: { headerCls: 'border-b' }, false: { innerWrapper: 'rounded-t-lg' } }, hasFooter: { true: { footerCls: 'border-t' }, false: { innerWrapper: 'rounded-b-lg' } } } }); ================================================ FILE: src/lib/forms/textarea/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLTextareaAttributes } from 'svelte/elements'; interface TextareaProps extends HTMLTextareaAttributes { header?: Snippet; footer?: Snippet; value?: string; wrapped?: boolean; divClass?: string | null; innerClass?: string; headerClass?: string; footerClass?: string; cols?: number; class?: string; } export { type TextareaProps }; ================================================ FILE: src/lib/forms/toggle/Toggle.svelte ================================================ ================================================ FILE: src/lib/forms/toggle/index.ts ================================================ import type { ToggleProps, ToggleColor } from './type'; import Toggle from './Toggle.svelte'; import { toggle } from './theme'; export { Toggle, toggle, type ToggleProps, type ToggleColor }; ================================================ FILE: src/lib/forms/toggle/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const toggle = tv({ slots: { span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ", label: 'flex items-center', input: 'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded dark:bg-gray-700 dark:border-gray-600 sr-only peer' }, variants: { disabled: { true: { label: 'cursor-not-allowed opacity-50' } }, checked: { true: '', false: '' }, color: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: { span: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600' }, secondary: { span: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600' }, gray: { span: 'peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-500' }, red: { span: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600' }, orange: { span: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500' }, amber: { span: 'peer-focus:ring-amber-300 dark:peer-focus:ring-amber-800 peer-checked:bg-amber-600' }, yellow: { span: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400' }, lime: { span: 'peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-500' }, green: { span: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600' }, emerald: { span: 'peer-focus:ring-emerald-300 dark:peer-focus:ring-emerald-800 peer-checked:bg-emerald-600' }, teal: { span: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600' }, cyan: { span: 'peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600' }, sky: { span: 'peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 peer-checked:bg-sky-600' }, blue: { span: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600' }, indigo: { span: 'peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600' }, violet: { span: 'peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 peer-checked:bg-violet-600' }, purple: { span: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600' }, fuchsia: { span: 'peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 peer-checked:bg-fuchsia-600' }, pink: { span: 'peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600' }, rose: { span: 'peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 peer-checked:bg-rose-600' } }, size: { small: { span: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4' }, default: { span: 'w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5' }, large: { span: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6' } } }, defaultVariants: { color: 'primary' } }); ================================================ FILE: src/lib/forms/toggle/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLInputAttributes } from 'svelte/elements'; type SizeType = 'default' | 'small' | 'large' | undefined; type ToggleColor = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface ToggleProps extends HTMLInputAttributes { children?: Snippet; leftLabel?: Snippet; toggleSize?: SizeType; value?: string | number; checked?: boolean | undefined; disabled?: boolean; spanClass?: string; color?: ToggleColor; labelClass?: string; aria_describedby?: string; inputClass?: string; } export { type ToggleProps, type ToggleColor }; ================================================ FILE: src/lib/gallery/Gallery.svelte ================================================ {#snippet figure(item: ImgType)}
    {item.alt}
    {/snippet}
    {#each items as item} {@render figure(item as ImgType)} {:else} {#if children} {@render children()} {/if} {/each}
    ================================================ FILE: src/lib/gallery/index.ts ================================================ import type { GalleryProps, ImgType } from './type'; import Gallery from './Gallery.svelte'; import { gallery } from './theme'; export { Gallery, gallery, type GalleryProps, type ImgType }; ================================================ FILE: src/lib/gallery/theme.ts ================================================ import { tv } from 'tailwind-variants'; const gallery = tv({ slots: { image: 'h-auto max-w-full rounded-lg', div: 'grid' } }); export { gallery }; ================================================ FILE: src/lib/gallery/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLImgAttributes } from 'svelte/elements'; type ImgType = { src?: string; alt?: string; }; interface GalleryProps { children?: Snippet; items?: HTMLImgAttributes[]; imgClass?: string; divClass?: string; } export { type GalleryProps, type ImgType }; ================================================ FILE: src/lib/index.ts ================================================ export * from './uiHelpers.svelte'; export * from './accordion'; export * from './alert'; export * from './avatar'; export * from './badge'; export * from './banner'; export * from './bottom-navigation'; export * from './breadcrumb'; export * from './buttongroup'; export * from './buttons'; export * from './cards'; export * from './chart'; export * from './darkmode'; export * from './device-mockups'; export * from './dropdown'; export * from './drawer'; export * from './footer'; export * from './gallery'; export * from './indicator'; export * from './kbd'; export * from './list-group'; export * from './mega-menu'; export * from './modal'; export * from './nav'; export * from './pagination'; export * from './popover'; export * from './progress'; export * from './rating'; export * from './sidebar'; export * from './skeleton'; export * from './spinner'; export * from './tabs'; export * from './table'; export * from './timeline'; export * from './toast'; export * from './toolbar'; export * from './tooltip'; export * from './utils'; export * from './video'; // forms export * from './forms/checkbox'; export * from './forms/checkbox-button'; export * from './forms/dropzone'; export * from './forms/fileupload'; export * from './forms/floating-label-input'; export * from './forms/helper'; export * from './forms/input'; export * from './forms/input-addon'; export * from './forms/label'; export * from './forms/select'; export * from './forms/radio'; export * from './forms/radio-button'; export * from './forms/range'; export * from './forms/search'; export * from './forms/textarea'; export * from './forms/toggle'; // typography export * from './typography/anchor'; export * from './typography/blockquote'; export * from './typography/descriptionlist'; export * from './typography/heading'; export * from './typography/hr'; export * from './typography/img'; export * from './typography/layout'; export * from './typography/list'; export * from './typography/mark'; export * from './typography/paragraph'; export * from './typography/secondary'; export * from './typography/span'; export * from './video'; export * from './utils'; export * from './types'; export { default as Theme } from './theme/Theme.svelte'; ================================================ FILE: src/lib/indicator/Indicator.svelte ================================================
    {#if children} {@render children()} {/if}
    ================================================ FILE: src/lib/indicator/index.ts ================================================ import type { IndicatorProps } from './type'; import Indicator from './Indicator.svelte'; import { indicator } from './theme'; export { Indicator, indicator, type IndicatorProps }; ================================================ FILE: src/lib/indicator/theme.ts ================================================ import { tv } from 'tailwind-variants'; const indicator = tv({ slots: { base: 'flex-shrink-0' }, 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-500' }, secondary: { base: 'bg-secondary-500' }, gray: { base: 'bg-gray-200' }, red: { base: 'bg-red-500' }, orange: { base: 'bg-orange-600' }, amber: { base: 'bg-amber-500' }, yellow: { base: 'bg-yellow-300' }, lime: { base: 'bg-lime-500' }, green: { base: 'bg-green-500' }, emerald: { base: 'bg-emerald-500' }, teal: { base: 'bg-teal-500' }, cyan: { base: 'bg-cyan-500' }, sky: { base: 'bg-sky-500' }, blue: { base: 'bg-blue-500' }, indigo: { base: 'bg-indigo-500' }, violet: { base: 'bg-violet-500' }, purple: { base: 'bg-purple-500' }, fuchsia: { base: 'bg-fuchsia-500' }, pink: { base: 'bg-pink-500' }, rose: { base: 'bg-rose-500' } }, size: { xs: { base: 'w-2 h-2' }, sm: { base: 'w-2.5 h-2.5' }, md: { base: 'w-3 h-3' }, lg: { base: 'w-3.5 h-3.5' }, xl: { base: 'w-6 h-6' } }, cornerStyle: { rounded: { base: 'rounded' }, circular: { base: 'rounded-full' } }, border: { true: { base: 'border border-gray-300 dark:border-gray-300' }, false: {} }, hasChildren: { true: { base: 'inline-flex items-center justify-center' }, false: {} }, placement: { default: { base: '' }, 'top-left': { base: 'absolute top-0 start-0' }, 'top-center': { base: 'absolute top-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2' }, 'top-right': { base: 'absolute top-0 end-0' }, 'center-left': { base: 'absolute top-1/2 -translate-y-1/2 start-0' }, center: { base: 'absolute top-1/2 -translate-y-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2' }, 'center-right': { base: 'absolute top-1/2 -translate-y-1/2 end-0' }, 'bottom-left': { base: 'absolute bottom-0 start-0' }, 'bottom-center': { base: 'absolute bottom-0 start-1/2 -translate-x-1/2 rtl:translate-x-1/2' }, 'bottom-right': { base: 'absolute bottom-0 end-0' } }, offset: { true: {}, false: {} } }, compoundVariants: [ { placement: 'top-left', offset: true, class: { base: '-translate-x-1/3 rtl:translate-x-1/3 -translate-y-1/3' } }, { placement: 'top-center', offset: true, class: { base: '-translate-y-1/3' } }, { placement: 'top-right', offset: true, class: { base: 'translate-x-1/3 rtl:-translate-x-1/3 -translate-y-1/3' } }, { placement: 'center-left', offset: true, class: { base: '-translate-x-1/3 rtl:translate-x-1/3' } }, { placement: 'center-right', offset: true, class: { base: 'translate-x-1/3 rtl:-translate-x-1/3' } }, { placement: 'bottom-left', offset: true, class: { base: '-translate-x-1/3 rtl:translate-x-1/3 translate-y-1/3' } }, { placement: 'bottom-center', offset: true, class: { base: 'translate-y-1/3' } }, { placement: 'bottom-right', offset: true, class: { base: 'translate-x-1/3 rtl:-translate-x-1/3 translate-y-1/3' } } ], defaultVariants: { color: 'primary', size: 'md', cornerStyle: 'circular', border: false, offset: true, hasChildren: false } }); export { indicator }; ================================================ FILE: src/lib/indicator/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; type ColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; type SizeType = 'md' | 'sm' | 'lg' | 'xl' | 'xs' | undefined; type PlacementType = | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default' | 'center' | undefined; interface IndicatorProps extends HTMLAttributes { children?: Snippet; color?: ColorType; cornerStyle?: 'rounded' | 'circular'; size?: SizeType; border?: boolean; placement?: PlacementType | undefined; class?: string; offset?: boolean; } export { type IndicatorProps }; ================================================ FILE: src/lib/kbd/Kbd.svelte ================================================ {@render children()} ================================================ FILE: src/lib/kbd/index.ts ================================================ import type { KbdProps } from './type'; import Kbd from './Kbd.svelte'; import { kbd } from './theme'; export { Kbd, kbd, type KbdProps }; ================================================ FILE: src/lib/kbd/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const kbd = tv({ base: 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500' }); ================================================ FILE: src/lib/kbd/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface KbdProps extends HTMLAttributes { children: Snippet; class: string | undefined | null; } export { type KbdProps }; ================================================ FILE: src/lib/list-group/Listgroup.svelte ================================================ {#if items} {#each items as item} {#if typeof item === 'string'} {item} {:else} {item} {/if} {/each} {:else if children} {@render children()} {/if} ================================================ FILE: src/lib/list-group/ListgroupItem.svelte ================================================ {#if !active && children}
  • {@render children()}
    • {:else if href} {name} {:else} {/if} ================================================ FILE: src/lib/list-group/index.ts ================================================ import type { ListgroupProps, ListgroupItemProps, ListGroupItemType } from './type'; import Listgroup from './Listgroup.svelte'; import ListgroupItem from './ListgroupItem.svelte'; import { listGroup, listGroupItem } from './theme'; export { Listgroup, ListgroupItem, listGroup, listGroupItem, type ListgroupProps, type ListgroupItemProps, type ListGroupItemType }; ================================================ FILE: src/lib/list-group/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const listGroup = tv({ base: 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 divide-y divide-gray-200 dark:divide-gray-600', variants: { rounded: { true: 'rounded-lg', false: '' }, border: { true: 'border border-gray-200 dark:border-gray-700', false: '' } }, compoundVariants: [ { border: true, class: 'divide-gray-200 dark:divide-gray-700' } ], defaultVariants: { rounded: true, border: true } }); export const listGroupItem = tv({ base: 'py-2 px-4 w-full text-sm font-medium list-none', variants: { state: { normal: '', current: '', disabled: '' }, active: { true: '', false: '' } }, compoundVariants: [ { active: true, state: 'disabled', class: 'cursor-not-allowed' }, { active: true, state: 'normal', class: 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white' } ] }); ================================================ FILE: src/lib/list-group/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAnchorAttributes } from 'svelte/elements'; import type { Component } from 'svelte'; /* eslint-disable @typescript-eslint/no-explicit-any */ interface ListGroupItemType { name: string; Icon?: Component; onclick?: () => void; href?: string; active?: boolean; current?: boolean; disabled?: boolean; [key: string]: any; } interface ListgroupProps { children?: Snippet; items?: (ListGroupItemType | string)[]; active?: boolean; onclick?: (event?: MouseEvent) => void; rounded?: boolean; border?: boolean; class?: string; itemClass?: string; aClasss?: string; btnClass?: string; iconClass?: string; } interface ListgroupItemProps extends HTMLAnchorAttributes { children: Snippet; onclick?: (event?: MouseEvent) => void; active?: boolean; current?: boolean; disabled?: boolean; name?: string; Icon?: Component; href?: string; currentClass?: string; normalClass?: string; disabledClass?: string; liClass?: string; class?: string; aClasss?: string; btnClass?: string; iconClass?: string; } export { type ListgroupProps, type ListgroupItemProps, type ListGroupItemType }; ================================================ FILE: src/lib/mega-menu/MegaMenu.svelte ================================================ {#if dropdownStatus}
      {#each items as item, index}
    • {@render children({ item, index })}
      • {:else} {@render children({ item: items[0], index: 0 })} {/each}
    {#if full && footer}
    {@render footer()}
    {/if}
    {/if} ================================================ FILE: src/lib/mega-menu/index.ts ================================================ import type { MegaMenuProps } from './type'; import MegaMenu from './MegaMenu.svelte'; import { megamenu } from './theme'; export { MegaMenu, type MegaMenuProps, megamenu }; ================================================ FILE: src/lib/mega-menu/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const megamenu = tv({ slots: { base: 'w-full border rounded-lg', div: 'flex flex-col md:flex-row p-4 max-w-screen-md justify-center mx-auto mt-2', ul: 'grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium', footerDiv: 'md:w-1/3 mt-4 md:mt-0' }, variants: { full: {} } }); ================================================ FILE: src/lib/mega-menu/type.ts ================================================ import type { Snippet } from 'svelte'; import type { LinkType } from '../types'; import type { HTMLAttributes } from 'svelte/elements'; interface MegaMenuProps extends Omit, 'children'> { children: Snippet<[{ item: LinkType; index: number }]>; footer?: Snippet; items?: LinkType[]; full?: boolean; ulClass?: string; dropdownStatus: boolean; divClass?: string; footerClass?: string; headerClass?: string; class?: string; } export { type MegaMenuProps }; ================================================ FILE: src/lib/modal/Modal.svelte ================================================ {#if modalStatus} {#if backdrop && outsideClose} {:else if backdrop && !outsideClose} {:else if !backdrop && outsideClose} {:else if !backdrop && !outsideClose} {/if}
    {#if title || header}
    {#if title}

    {title}

    {:else if header} {@render header()} {/if} {#if dismissable} {/if}
    {/if}
    {#if dismissable && !title && !header} {/if} {@render children()}
    {#if footer}
    {@render footer()}
    {/if}
    {/if} ================================================ FILE: src/lib/modal/index.ts ================================================ import type { ModalProps } from './type'; import Modal from './Modal.svelte'; import { modal } from './theme'; export { Modal, modal, type ModalProps }; ================================================ FILE: src/lib/modal/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const modal = tv({ slots: { base: 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none', div: 'flex relative w-full max-h-full', content: 'w-full divide-y text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800 bg-white dark:bg-gray-800 pointer-events-auto', backdrop: 'fixed inset-0 z-50 bg-gray-900/50 dark:bg-gray-900/80 pointer-events-auto', header: 'flex justify-between items-center p-4 md:p-5 rounded-t-lg', footer: 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg', body: 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain', closeBtn: 'absolute top-3 end-2.5', h3: 'text-xl font-semibold text-gray-900 dark:text-white p-0' }, variants: { // position: { // fixed: { base: 'fixed' }, // absolute: { base: 'absolute' } // }, position: { 'top-left': { base: 'justify-start items-start' }, 'top-center': { base: 'justify-center items-start' }, 'top-right': { base: 'justify-end items-start' }, 'center-left': { base: 'justify-start items-center' }, center: { base: 'justify-center items-center' }, 'center-right': { base: 'justify-end items-center' }, 'bottom-left': { base: 'justify-start items-end' }, 'bottom-center': { base: 'justify-center items-end' }, 'bottom-right': { base: 'justify-end items-end' }, default: { base: 'justify-center items-center' } }, size: { xs: { div: 'max-w-md' }, sm: { div: 'max-w-lg' }, md: { div: 'max-w-2xl' }, lg: { div: 'max-w-4xl' }, xl: { div: 'max-w-7xl' } }, rounded: { true: { content: 'rounded' } }, shadow: { true: { content: 'shadow-md' } } } }); ================================================ FILE: src/lib/modal/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import type { TransitionFunc, ParamsType } from '../types'; type WidthType = 'md' | 'sm' | 'lg' | 'xl' | 'xs' | undefined; type PosisionType = | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'default' | undefined; interface ModalProps extends HTMLAttributes { children: Snippet; header?: Snippet; footer?: Snippet; title?: string; modalStatus: boolean; dismissable?: boolean; closeModal?: () => void; closeBtnClass?: string; h3Class?: string; divClass?: string; headerClass?: string; contentClass?: string; bodyClass?: string; footerClass?: string; outsideClose?: boolean; position?: PosisionType; size?: WidthType; backdrop?: boolean; backdropClass?: string; rounded?: boolean; // placement?: PlacementType; class?: string; params?: ParamsType; transition?: TransitionFunc; } export { type ModalProps }; ================================================ FILE: src/lib/nav/NavBrand.svelte ================================================ {#if children} {@render children()} {/if} {#if siteName} {siteName} {/if} ================================================ FILE: src/lib/nav/NavHamburger.svelte ================================================ ================================================ FILE: src/lib/nav/NavLi.svelte ================================================
  • {@render children()}
    • ================================================ FILE: src/lib/nav/NavUl.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/nav/Navbar.svelte ================================================ ================================================ FILE: src/lib/nav/index.ts ================================================ import type { NavbarProps, NavBrandProps, NavLiProps, NavUlProps, NavHamburgerProps } from './type'; import Navbar from './Navbar.svelte'; import NavBrand from './NavBrand.svelte'; import NavLi from './NavLi.svelte'; import NavUl from './NavUl.svelte'; import NavHamburger from './NavHamburger.svelte'; import { navbar, navUl, navbrand, navLi, navhamburger } from './theme'; export { Navbar, navbar, type NavbarProps, NavBrand, navbrand, type NavBrandProps, NavLi, navLi, type NavLiProps, NavUl, navUl, type NavUlProps, NavHamburger, navhamburger, type NavHamburgerProps }; ================================================ FILE: src/lib/nav/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const navbar = tv({ slots: { base: 'bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full', container: 'mx-auto flex flex-wrap items-center justify-between', toggleButton: 'inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600', menuContainer: 'w-full', activeLink: 'block py-2 px-3 text-white bg-primary-700 rounded dark:text-white', inactiveLink: 'block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white' }, variants: { fluid: { true: { container: 'w-full' }, false: { container: 'container' } }, breakPoint: { md: { container: 'max-w-screen-xl', toggleButton: 'md:hidden', menuContainer: 'md:block md:w-auto' }, lg: { container: 'max-w-screen-xl', toggleButton: 'lg:hidden', menuContainer: 'lg:block lg:w-auto' }, xl: { container: 'max-w-screen-xl', toggleButton: 'xl:hidden', menuContainer: 'xl:block xl:w-auto' }, xxl: { container: 'w-full', toggleButton: '2xl:hidden', menuContainer: '2xl:block 2xl:w-auto' } }, navStatus: { true: { menuContainer: 'block' }, false: { menuContainer: 'hidden' } } }, defaultVariants: { fluid: false, breakPoint: 'md', navStatus: false } }); export const navUl = tv({ base: 'font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700', variants: { breakPoint: { md: 'md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 md:dark:bg-gray-900', lg: 'lg:mt-0 lg:flex-row lg:space-x-8 lg:border-0 lg:p-0 lg:dark:bg-gray-900', xl: 'xl:mt-0 xl:flex-row xl:space-x-8 xl:border-0 lg:p-0 xl:dark:bg-gray-900', xxl: '2xl:mt-0 2xl:flex-row 2xl:space-x-8 2xl:border-0 2xl:p-0 2xl:dark:bg-gray-900' } } }); export const navbrand = tv({ slots: { base: 'flex items-center space-x-3 rtl:space-x-reverse', span: 'self-center whitespace-nowrap text-2xl font-semibold text-primary-900 dark:text-white sm:text-3xl' } }); export const navLi = tv({ slots: { base: 'list-none', link: 'block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white' }, variants: { active: { true: { link: 'bg-primary-700 text-white' } }, breakPoint: { md: { link: 'md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 md:dark:hover:text-primary-500 md:dark:hover:bg-transparent' }, lg: { link: 'lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 lg:dark:hover:text-primary-500 lg:dark:hover:bg-transparent' }, xl: { link: 'xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 xl:p-0 xl:dark:hover:text-primary-500 xl:dark:hover:bg-transparent' }, xxl: { link: '2xl:hover:bg-transparent 2xl:border-0 2xl:hover:text-primary-700 2xl:p-0 2xl:dark:hover:text-primary-500 2xl:dark:hover:bg-transparent' } } }, compoundVariants: [ { active: true, breakPoint: 'md', class: { link: 'md:bg-transparent md:text-primary-700 md:p-0 md:dark:text-primary-500' } }, { active: true, breakPoint: 'lg', class: { link: 'lg:bg-transparent lg:text-primary-700 lg:p-0 lg:dark:text-primary-500' } }, { active: true, breakPoint: 'xl', class: { link: 'xl:bg-transparent xl:text-primary-700 xl:p-0 xl:dark:text-primary-500' } }, { active: true, breakPoint: 'xxl', class: { link: '2xl:bg-transparent 2xl:text-primary-700 2xl:p-0 2xl:dark:text-primary-500' } } ], defaultVariants: { breakPoint: 'md', active: false } }); export const navcontainer = tv({ base: 'mx-auto flex flex-wrap justify-between items-center', variants: { fluid: { true: 'w-full', false: 'container' } } }); export const navhamburger = tv({ base: 'inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600', variants: { breakPoint: { md: 'md:hidden', lg: 'lg:hidden', xl: 'xl:hidden', xxl: '2xl:hidden' } } }); ================================================ FILE: src/lib/nav/type.ts ================================================ import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements'; import type { Snippet } from 'svelte'; import type { navbarType } from '$lib/types'; interface NavbarProps extends HTMLAttributes { children: Snippet; navSlotBlock?: Snippet; navSlotHiddenTop?: Snippet; navSlotHiddenBottom?: Snippet; toggleNav?: () => void; closeNav?: () => void; navStatus?: boolean | undefined; fluid?: boolean; brand?: Snippet; hamburgerMenu?: boolean; breakPoint?: navbarType['breakPoint']; navClass?: string; divClass?: string; btnClass?: string; div2Class?: string; nonActiveClass?: string; activeClass?: string; } interface NavBrandProps extends HTMLAnchorAttributes { children?: Snippet; siteName?: string | undefined | null; closeNav?: () => void; aClass?: string; spanClass?: string; } interface NavUlProps extends HTMLAttributes { children: Snippet; class?: string; activeUrl?: string; } interface NavLiProps extends HTMLAnchorAttributes { children: Snippet; closeNav?: () => void; href?: string; aClass?: string; class?: string; } interface NavHamburgerProps extends HTMLAttributes { toggleNav: () => void; class?: string; } export { type NavbarProps, type NavBrandProps, type NavLiProps, type NavUlProps, type NavHamburgerProps }; ================================================ FILE: src/lib/pagination/Pagination.svelte ================================================ ================================================ FILE: src/lib/pagination/PaginationItem.svelte ================================================ {#if href} {#if children} {@render children()} {/if} {:else} {/if} ================================================ FILE: src/lib/pagination/index.ts ================================================ import type { PaginationItemProps, PaginationProps, PaginationItemSpecificProps } from './type'; import { paginationItem, pagination } from './theme'; import Pagination from './Pagination.svelte'; import PaginationItem from './PaginationItem.svelte'; export { Pagination, PaginationItem, paginationItem, pagination, type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps }; ================================================ FILE: src/lib/pagination/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const paginationItem = tv({ base: 'flex items-center font-medium', variants: { size: { default: 'h-8 px-3 text-sm', large: 'h-10 px-4 text-base' }, active: { true: 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white', false: 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white' }, group: { true: '', false: 'rounded-lg' }, table: { true: 'rounded', false: 'border' } }, compoundVariants: [ { group: false, table: false, class: 'rounded-lg' } ], defaultVariants: { size: 'default', active: false, group: false, table: false } }); export const pagination = tv({ base: 'inline-flex -space-x-px rtl:space-x-reverse items-center', variants: { table: { true: 'divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700', false: '' }, size: { default: '', large: '' } }, defaultVariants: { table: false, size: 'default' } }); ================================================ FILE: src/lib/pagination/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLLiAttributes } from 'svelte/elements'; type PaginationItemType = { size?: 'default' | 'large'; active?: boolean | null; group?: boolean | null; table?: boolean | null; }; interface PaginationItemSpecificProps { children?: Snippet; name?: string; href?: string; active?: boolean; rel?: string; size?: 'default' | 'large' | undefined; } type HTMLAttributesWithoutAbort = Omit & Omit; interface PaginationItemProps extends HTMLAttributesWithoutAbort { children?: Snippet; name?: string; href?: string; active?: boolean; rel?: string; size?: 'default' | 'large' | undefined; class?: string; } interface PaginationProps extends HTMLLiAttributes { prevContent?: Snippet; nextContent?: Snippet; pages?: PaginationItemProps[]; previous?: () => void; next?: () => void; table?: boolean; size?: PaginationItemType['size']; ariaLabel?: string; } export { type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps }; ================================================ FILE: src/lib/popover/Popover.svelte ================================================ {#if transition && visible} {:else if visible} {/if} ================================================ FILE: src/lib/popover/index.ts ================================================ import type { PopoverProps, TooltipPositionOptions, PositionResult, Position } from './type'; import Popover from './Popover.svelte'; import { popover } from './theme'; /** * Calculates the position for a tooltip relative to a reference element. * @param options - The options for positioning * @returns The calculated position for the tooltip and arrow */ function calculateTooltipPosition({ tooltipRect, referenceRect, position, offset, arrowRect }: TooltipPositionOptions): PositionResult { const scrollX = window.scrollX || document.documentElement.scrollLeft; const scrollY = window.scrollY || document.documentElement.scrollTop; let top: number, left: number, arrowTop: number | undefined, arrowLeft: number | undefined; switch (position) { case 'top': top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset; left = referenceRect.left + scrollX + referenceRect.width / 2 - tooltipRect.width / 2; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height - 5; arrowLeft = tooltipRect.width / 2 - arrowRect.width / 2; } break; case 'top-start': top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset; left = referenceRect.left + scrollX; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height - 5; arrowLeft = referenceRect.width / 2 - arrowRect.width / 2; } break; case 'top-end': top = referenceRect.top + scrollY - tooltipRect.height - 10 - offset; left = referenceRect.right + scrollX - tooltipRect.width; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height - 5; arrowLeft = tooltipRect.width - referenceRect.width / 2 - arrowRect.width / 2; } break; case 'bottom': top = referenceRect.bottom + scrollY + 10 + offset; left = referenceRect.left + scrollX + referenceRect.width / 2 - tooltipRect.width / 2; if (arrowRect && offset === 0) { arrowTop = -arrowRect.height + 9; arrowLeft = tooltipRect.width / 2 - arrowRect.width / 2; } break; case 'bottom-start': top = referenceRect.bottom + scrollY + 10 + offset; left = referenceRect.left + scrollX; if (arrowRect && offset === 0) { arrowTop = -arrowRect.height + 9; arrowLeft = referenceRect.width / 2 - arrowRect.width / 2; } break; case 'bottom-end': top = referenceRect.bottom + scrollY + 10 + offset; left = referenceRect.right + scrollX - tooltipRect.width; if (arrowRect && offset === 0) { arrowTop = -arrowRect.height + 9; arrowLeft = tooltipRect.width - referenceRect.width / 2 - arrowRect.width / 2; } break; case 'left': top = referenceRect.top + scrollY + referenceRect.height / 2 - tooltipRect.height / 2; left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height / 2 - arrowRect.height / 2; arrowLeft = tooltipRect.width - 5; } break; case 'left-start': top = referenceRect.top + scrollY; left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset; if (arrowRect && offset === 0) { arrowTop = arrowRect.height; arrowLeft = tooltipRect.width - 5; } break; case 'left-end': top = referenceRect.bottom + scrollY - tooltipRect.height; left = referenceRect.left + scrollX - tooltipRect.width - 10 - offset; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height - arrowRect.height * 2; arrowLeft = tooltipRect.width - 5; } break; case 'right': top = referenceRect.top + scrollY + referenceRect.height / 2 - tooltipRect.height / 2; left = referenceRect.right + scrollX + 10 + offset; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height / 2 - arrowRect.height / 2; arrowLeft = -arrowRect.width / 2 + 2; } break; case 'right-start': top = referenceRect.top + scrollY; left = referenceRect.right + scrollX + 10 + offset; if (arrowRect && offset === 0) { arrowTop = arrowRect.height; arrowLeft = -arrowRect.width / 2 + 2; } break; case 'right-end': top = referenceRect.bottom + scrollY - tooltipRect.height; left = referenceRect.right + scrollX + 10 + offset; if (arrowRect && offset === 0) { arrowTop = tooltipRect.height - arrowRect.height * 2; arrowLeft = -arrowRect.width / 2 + 2; } break; } return { top, left, arrowTop, arrowLeft }; } export { Popover, popover, type PopoverProps, type Position, calculateTooltipPosition }; ================================================ FILE: src/lib/popover/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const popover = tv({ slots: { base: 'popover absolute rounded-lg shadow-md', title: 'py-2 px-3 rounded-t-md border-b ', h3: 'font-semibold', arrowBase: 'absolute pointer-events-none block w-[10px] h-[10px] rotate-45 bg-inherit border-inherit shadow-md' }, variants: { color: { default: { base: 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700', title: 'bg-gray-100 border-gray-200 dark:border-gray-600 dark:bg-gray-700', h3: 'text-gray-900 dark:text-white' }, primary: { base: 'bg-primary-600 text-white', title: 'bg-primary-700', h3: 'text-white' }, secondary: { base: 'bg-secondary-600 text-white', title: 'bg-secondary-700', h3: 'text-white' }, gray: { base: 'bg-gray-600 text-white', title: 'bg-gray-700', h3: 'text-white' }, red: { base: 'bg-red-600 text-white', title: 'bg-red-700', h3: 'text-white' }, orange: { base: 'bg-orange-600 text-white', title: 'bg-orange-700', h3: 'text-white' }, amber: { base: 'bg-amber-600 text-white', title: 'bg-amber-700', h3: 'text-white' }, yellow: { base: 'bg-yellow-400 text-white', title: 'bg-yellow-500', h3: 'text-white' }, lime: { base: 'bg-lime-600 text-white', title: 'bg-lime-700', h3: 'text-white' }, green: { base: 'bg-green-600 text-white', title: 'bg-green-700', h3: 'text-white' }, emerald: { base: 'bg-emerald-600 text-white', title: 'bg-emerald-700', h3: 'text-white' }, teal: { base: 'bg-teal-600 text-white', title: 'bg-teal-700', h3: 'text-white' }, cyan: { base: 'bg-cyan-600 text-white', title: 'bg-cyan-700', h3: 'text-white' }, sky: { base: 'bg-sky-600 text-white', title: 'bg-sky-700 text-white', h3: 'text-white' }, blue: { base: 'bg-blue-600 text-white', title: 'bg-blue-700 text-white', h3: 'text-white' }, indigo: { base: 'bg-indigo-600 text-white', title: 'bg-indigo-700', h3: 'text-white' }, violet: { base: 'bg-violet-600 text-white', title: 'bg-violet-700', h3: 'text-white' }, purple: { base: 'bg-purple-600 text-white', title: 'bg-purple-700', h3: 'text-white' }, fuchsia: { base: 'bg-fuchsia-600 text-white', title: 'bg-fuchsia-700', h3: 'text-white' }, pink: { base: 'bg-pink-600 text-white', title: 'bg-pink-700', h3: 'text-white' }, rose: { base: 'bg-rose-800 text-white', title: 'bg-rose-700', h3: 'text-white' } }, arrow: { true: '', false: '' }, position: { top: '', bottom: '', left: '', right: '', 'right-start': '', 'right-end': '', 'left-start': '', 'left-end': '', 'top-start': '', 'top-end': '', 'bottom-start': '', 'bottom-end': '' } }, compoundVariants: [ { arrow: true, position: 'bottom', color: 'default', class: { arrowBase: 'bg-gray-100 dark:bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'primary', class: { arrowBase: 'bg-primary-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'secondary', class: { arrowBase: 'bg-secondary-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'gray', class: { arrowBase: 'bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'red', class: { arrowBase: 'bg-red-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'orange', class: { arrowBase: 'bg-orange-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'amber', class: { arrowBase: 'bg-amber-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'yellow', class: { arrowBase: 'bg-yellow-500 shadow-none' } }, { arrow: true, position: 'bottom', color: 'lime', class: { arrowBase: 'bg-lime-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'green', class: { arrowBase: 'bg-green-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'emerald', class: { arrowBase: 'bg-emerald-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'teal', class: { arrowBase: 'bg-teal-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'cyan', class: { arrowBase: 'bg-cyan-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'sky', class: { arrowBase: 'bg-sky-700 ' } }, { arrow: true, position: 'bottom', color: 'blue', class: { arrowBase: 'bg-blue-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'indigo', class: { arrowBase: 'bg-indigo-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'violet', class: { arrowBase: 'bg-violet-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'purple', class: { arrowBase: 'bg-purple-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'fuchsia', class: { arrowBase: 'bg-fuchsia-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'pink', class: { arrowBase: 'bg-pink-700 shadow-none' } }, { arrow: true, position: 'bottom', color: 'rose', class: { arrowBase: 'bg-rose-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'default', class: { arrowBase: 'bg-gray-100 dark:bg-gray-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'primary', class: { arrowBase: 'bg-primary-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'secondary', class: { arrowBase: 'bg-secondary-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'gray', class: { arrowBase: 'bg-gray-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'red', class: { arrowBase: 'bg-red-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'orange', class: { arrowBase: 'bg-orange-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'amber', class: { arrowBase: 'bg-amber-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'yellow', class: { arrowBase: 'bg-yellow-500 shadow-none' } }, { arrow: true, position: 'right-start', color: 'lime', class: { arrowBase: 'bg-lime-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'green', class: { arrowBase: 'bg-green-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'emerald', class: { arrowBase: 'bg-emerald-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'teal', class: { arrowBase: 'bg-teal-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'cyan', class: { arrowBase: 'bg-cyan-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'sky', class: { arrowBase: 'bg-sky-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'blue', class: { arrowBase: 'bg-blue-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'indigo', class: { arrowBase: 'bg-indigo-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'violet', class: { arrowBase: 'bg-violet-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'purple', class: { arrowBase: 'bg-purple-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'fuchsia', class: { arrowBase: 'bg-fuchsia-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'pink', class: { arrowBase: 'bg-pink-700 shadow-none' } }, { arrow: true, position: 'right-start', color: 'rose', class: { arrowBase: 'bg-rose-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'default', class: { arrowBase: 'bg-gray-100 dark:bg-gray-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'primary', class: { arrowBase: 'bg-primary-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'secondary', class: { arrowBase: 'bg-secondary-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'gray', class: { arrowBase: 'bg-gray-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'red', class: { arrowBase: 'bg-red-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'orange', class: { arrowBase: 'bg-orange-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'amber', class: { arrowBase: 'bg-amber-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'yellow', class: { arrowBase: 'bg-yellow-500 shadow-none' } }, { arrow: true, position: 'left-start', color: 'lime', class: { arrowBase: 'bg-lime-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'green', class: { arrowBase: 'bg-green-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'emerald', class: { arrowBase: 'bg-emerald-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'teal', class: { arrowBase: 'bg-teal-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'cyan', class: { arrowBase: 'bg-cyan-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'sky', class: { arrowBase: 'bg-sky-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'blue', class: { arrowBase: 'bg-blue-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'indigo', class: { arrowBase: 'bg-indigo-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'violet', class: { arrowBase: 'bg-violet-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'purple', class: { arrowBase: 'bg-purple-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'fuchsia', class: { arrowBase: 'bg-fuchsia-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'pink', class: { arrowBase: 'bg-pink-700 shadow-none' } }, { arrow: true, position: 'left-start', color: 'rose', class: { arrowBase: 'bg-rose-700 shadow-none' } }, // left, left-end, left-start { arrow: true, position: 'left', color: 'default', class: { arrowBase: 'bg-white border-t border-r dark:bg-gray-800 shadow-none' } }, { arrow: true, position: 'left-end', color: 'default', class: { arrowBase: 'bg-white border-t border-r dark:bg-gray-800 shadow-none' } }, // bottom-start, bottom-end // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose { arrow: true, position: 'bottom-start', color: 'default', class: { arrowBase: 'bg-gray-100 dark:bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'primary', class: { arrowBase: 'bg-primary-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'secondary', class: { arrowBase: 'bg-secondary-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'gray', class: { arrowBase: 'bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'red', class: { arrowBase: 'bg-red-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'orange', class: { arrowBase: 'bg-orange-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'amber', class: { arrowBase: 'bg-amber-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'yellow', class: { arrowBase: 'bg-yellow-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'lime', class: { arrowBase: 'bg-lime-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'green', class: { arrowBase: 'bg-green-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'emerald', class: { arrowBase: 'bg-emerald-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'teal', class: { arrowBase: 'bg-teal-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'cyan', class: { arrowBase: 'bg-cyan-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'sky', class: { arrowBase: 'bg-sky-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'blue', class: { arrowBase: 'bg-blue-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'indigo', class: { arrowBase: 'bg-indigo-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'violet', class: { arrowBase: 'bg-violet-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'purple', class: { arrowBase: 'bg-purple-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'fuchsia', class: { arrowBase: 'bg-fuchsia-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'pink', class: { arrowBase: 'bg-pink-700 shadow-none' } }, { arrow: true, position: 'bottom-start', color: 'rose', class: { arrowBase: 'bg-rose-700 shadow-none' } }, // bottom-end // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose { arrow: true, position: 'bottom-end', color: 'default', class: { arrowBase: 'bg-gray-100 dark:bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'primary', class: { arrowBase: 'bg-primary-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'secondary', class: { arrowBase: 'bg-secondary-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'gray', class: { arrowBase: 'bg-gray-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'red', class: { arrowBase: 'bg-red-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'orange', class: { arrowBase: 'bg-orange-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'amber', class: { arrowBase: 'bg-amber-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'yellow', class: { arrowBase: 'bg-yellow-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'lime', class: { arrowBase: 'bg-lime-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'green', class: { arrowBase: 'bg-green-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'emerald', class: { arrowBase: 'bg-emerald-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'teal', class: { arrowBase: 'bg-teal-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'cyan', class: { arrowBase: 'bg-cyan-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'sky', class: { arrowBase: 'bg-sky-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'blue', class: { arrowBase: 'bg-blue-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'indigo', class: { arrowBase: 'bg-indigo-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'violet', class: { arrowBase: 'bg-violet-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'purple', class: { arrowBase: 'bg-purple-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'fuchsia', class: { arrowBase: 'bg-fuchsia-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'pink', class: { arrowBase: 'bg-pink-700 shadow-none' } }, { arrow: true, position: 'bottom-end', color: 'rose', class: { arrowBase: 'bg-rose-700 shadow-none' } } ] }); ================================================ FILE: src/lib/popover/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import type { TransitionFunc, ParamsType } from '../types'; type PopoverColorType = | 'default' | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface PopoverProps extends HTMLAttributes { children: Snippet; triggeredBy: string; titleSlot?: Snippet | string; // placement?: 'top' | 'bottom' | 'left' | 'right'; position?: | 'top' | 'bottom' | 'left' | 'right' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'; color?: PopoverColorType; arrow?: boolean; offset?: number; reference?: string; params?: ParamsType | undefined; transition?: TransitionFunc; class?: string; } type Position = | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'; interface TooltipPositionOptions { tooltipRect: DOMRect; referenceRect: DOMRect; position: Position; offset: number; arrowRect?: DOMRect; } interface PositionResult { top: number; left: number; arrowTop?: number; arrowLeft?: number; } export type { PopoverProps, TooltipPositionOptions, PositionResult, Position }; ================================================ FILE: src/lib/progress/Progressbar.svelte ================================================ {#if labelOutside}
    {labelOutside} {progress}%
    {/if}
    {#if labelInside}
    {$_progress.toFixed(precision)}%
    {:else}
    {/if}
    ================================================ FILE: src/lib/progress/index.ts ================================================ import type { ProgressbarProps } from './type'; import Progressbar from './Progressbar.svelte'; import { progressbar } from './theme'; export { Progressbar, progressbar, type ProgressbarProps }; ================================================ FILE: src/lib/progress/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const progressbar = tv({ slots: { base: 'w-full bg-gray-200 rounded-full dark:bg-gray-700', labelInsideDiv: 'text-primary-100 text-xs font-medium text-center leading-none rounded-full', insideDiv: 'rounded-full', outsideDiv: 'mb-1 flex justify-between', oustsideSpan: 'text-base font-medium text-blue-700 dark:text-white', outsideProgress: 'text-sm font-medium text-blue-700 dark:text-white' }, variants: { color: { // 'primary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' primary: { labelInsideDiv: 'bg-primary-600', insideDiv: 'bg-primary-600' }, gray: { labelInsideDiv: 'bg-gray-600 dark:bg-gray-300', insideDiv: 'bg-gray-600 dark:bg-gray-300' }, red: { labelInsideDiv: 'bg-red-600 dark:bg-red-500', insideDiv: 'bg-red-600 dark:bg-red-500' }, orange: { labelInsideDiv: 'bg-orange-600 dark:bg-orange-500', insideDiv: 'bg-orange-600 dark:bg-orange-500' }, amber: { labelInsideDiv: 'bg-amber-600 dark:bg-amber-500', insideDiv: 'bg-amber-600 dark:bg-amber-500' }, yellow: { labelInsideDiv: 'bg-yellow-400', insideDiv: 'bg-yellow-400' }, lime: { labelInsideDiv: 'bg-lime-600 dark:bg-lime-500', insideDiv: 'bg-lime-600 dark:bg-lime-500' }, green: { labelInsideDiv: 'bg-green-600 dark:bg-green-500', insideDiv: 'bg-green-600 dark:bg-green-500' }, emerald: { labelInsideDiv: 'bg-emerald-600 dark:bg-emerald-500', insideDiv: 'bg-emerald-600 dark:bg-emerald-500' }, teal: { labelInsideDiv: 'bg-teal-600 dark:bg-teal-500', insideDiv: 'bg-teal-600 dark:bg-teal-500' }, cyan: { labelInsideDiv: 'bg-cyan-600 dark:bg-cyan-500', insideDiv: 'bg-cyan-600 dark:bg-cyan-500' }, sky: { labelInsideDiv: 'bg-sky-600 dark:bg-sky-500', insideDiv: 'bg-sky-600 dark:bg-sky-500' }, blue: { labelInsideDiv: 'bg-blue-600', insideDiv: 'bg-blue-600' }, indigo: { labelInsideDiv: 'bg-indigo-600 dark:bg-indigo-500', insideDiv: 'bg-indigo-600 dark:bg-indigo-500' }, violet: { labelInsideDiv: 'bg-violet-600 dark:bg-violet-500', insideDiv: 'bg-violet-600 dark:bg-violet-500' }, purple: { labelInsideDiv: 'bg-purple-600 dark:bg-purple-500', insideDiv: 'bg-purple-600 dark:bg-purple-500' }, fuchsia: { labelInsideDiv: 'bg-fuchsia-600 dark:bg-fuchsia-500', insideDiv: 'bg-fuchsia-600 dark:bg-fuchsia-500' }, pink: { labelInsideDiv: 'bg-pink-600 dark:bg-pink-500', insideDiv: 'bg-pink-600 dark:bg-pink-500' }, rose: { labelInsideDiv: 'bg-rose-600 dark:bg-rose-500', insideDiv: 'bg-rose-600 dark:bg-rose-500' } }, labelInside: { true: '', false: '' } }, compoundVariants: [ { labelInside: true, class: { base: 'text-primary-100 text-xs font-medium text-center leading-none rounded-full', labelInsideDiv: 'p-0.5' } }, { labelInside: false, class: { base: 'rounded-full' } } ], defaultVariants: { color: 'primary', labelInside: false } }); ================================================ FILE: src/lib/progress/type.ts ================================================ import type { HTMLAttributes } from 'svelte/elements'; import type { EasingFunction } from 'svelte/transition'; type ColorType = | 'primary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface ProgressbarProps extends HTMLAttributes { progress?: string | number; precision?: number; tweenDuration?: number; animate?: boolean; size?: string; labelInside?: boolean; labelOutside?: string; easing?: EasingFunction; color?: ColorType; div2Class?: string; oustsideSpanClass?: string; oustsideProgressClass?: string; labeloutsidedivClass?: string; divClass?: string; } export { type ProgressbarProps }; ================================================ FILE: src/lib/rating/AdvancedRating.svelte ================================================ {#if rating} {@render rating()} {/if} {#if globalText} {@render globalText()} {/if} {#each ratings as { label, rating }}
    {label}
    {rating}{unit}
    {/each} ================================================ FILE: src/lib/rating/CustomIcon.svelte ================================================ {#if fillPercent !== 100} {:else} {/if} ================================================ FILE: src/lib/rating/Heart.svelte ================================================ {#if fillPercent !== 100} {:else} {/if} ================================================ FILE: src/lib/rating/Rating.svelte ================================================
    {#if count && children}

    {rating}

    {@render children()} {:else} {#each Array(fullStars) as _, index} {/each} {#if percentRating} {/if} {#each Array(grayStars) as _, index} {/each} {#if text} {@render text()} {/if} {/if}
    ================================================ FILE: src/lib/rating/RatingComment.svelte ================================================
    {comment.user.img.alt}

    {comment.user.name}

    {#snippet text()}

    {comment.rating} out of {comment.total}

    {/snippet}     {#if comment.heading}

    {comment.heading}

    {/if}
    {#if comment.address || comment.datetime}

    Reviewed in {comment.address} on {comment.datetime}

    {/if} {@render children()}
    ================================================ FILE: src/lib/rating/Review.svelte ================================================ {#if review}
    {review.imgAlt}

    {review.name}

    {#if review.address} {#if address}
    {@render address()}
    {/if} {/if}
    {#if review.item1 || review.item2 || review.item3}
      {#if review.item1}
    • {#if item1} {@render item1()} {/if}
      • {/if} {#if review.item2}
    • {#if item2} {@render item2()} {/if}
      • {/if} {#if review.item3}
    • {#if item3} {@render item3()} {/if}
      • {/if}
    {/if}
    {#if review.reviewDate}

    Reviewed: {review.reviewDate}

    {/if}

    {review.title}

    {review.rating}

    {@render children()}
    {/if} ================================================ FILE: src/lib/rating/ScoreRating.svelte ================================================
    {#if headerLabel} {#if headerLabel.desc1}

    {headerLabel.desc1}

    {/if} {#if headerLabel.desc2}

    {headerLabel.desc2}

    {/if} {#if headerLabel.desc3}

    {headerLabel.desc3}

    {/if} {#if headerLabel.link} {headerLabel.link.label} {/if} {/if}
    {#if ratings} {#each ratings as { label, rating }}
    {label}
    {rating}
    {/each} {/if}
    {#if ratings2} {#each ratings2 as { label, rating }}
    {label}
    {rating}
    {/each} {/if}
    ================================================ FILE: src/lib/rating/Star.svelte ================================================ {#if fillPercent !== 100} {:else} {/if} ================================================ FILE: src/lib/rating/Thumbup.svelte ================================================ {#if fillPercent !== 100} {:else} {/if} ================================================ FILE: src/lib/rating/index.ts ================================================ import type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps } from './type'; import AdvancedRating from './AdvancedRating.svelte'; import Heart from './Heart.svelte'; import Rating from './Rating.svelte'; import RatingComment from './RatingComment.svelte'; import Review from './Review.svelte'; import ScoreRating from './ScoreRating.svelte'; import Star from './Star.svelte'; import Thumbup from './Thumbup.svelte'; import CustomIcon from './CustomIcon.svelte'; import { advancedrating, rating, review, scorerating } from './theme'; export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon, type AdvancedRatingProps, type RatingProps, type RatingCommentProps, type ReviewProps, type ScoreRatingProps, type RatingIconProps }; ================================================ FILE: src/lib/rating/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const advancedrating = tv({ // divClass = 'flex items-center mt-4', spanClass = 'text-sm font-medium text-gray-600 dark:text-gray-500', div2Class = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700', div3Class = 'h-5 bg-yellow-400 rounded', span2Class = 'text-sm font-medium text-gray-600 dark:text-gray-500', slots: { base: 'flex items-center mt-4', span: 'text-sm font-medium text-gray-600 dark:text-gray-500', div2: 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700', div3: 'h-5 bg-yellow-400 rounded', span2: 'text-sm font-medium text-gray-600 dark:text-gray-500' } }); export const rating = tv({ slots: { base: 'flex items-center', p: 'ms-2 text-sm font-bold text-gray-900 dark:text-white' } }); export const review = tv({ slots: { article: 'md:grid md:grid-cols-3 md:gap-8', div: 'mb-6 flex items-center space-x-4 rtl:space-x-reverse', div2: 'space-y-1 font-medium dark:text-white', div3: 'flex items-center text-sm text-gray-500 dark:text-gray-400', img: 'h-10 w-10 rounded-full', ul: 'space-y-4 text-sm text-gray-500 dark:text-gray-400', li: 'flex items-center' } }); export const scorerating = tv({ slots: { desc1: 'bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded dark:bg-primary-200 dark:text-primary-800', desc2: 'ms-2 font-medium text-gray-900 dark:text-white', desc3: 'mx-2 w-1 h-1 mx-2 bg-gray-900 rounded-full dark:bg-gray-500', desc3span: 'text-sm w-24 font-medium text-gray-500 dark:text-gray-400', desc3p: 'text-sm w-24 font-medium text-gray-500 dark:text-gray-400', link: 'ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500', bar: 'bg-primary-600 h-2.5 rounded dark:bg-primary-500' } }); ================================================ FILE: src/lib/rating/type.ts ================================================ import type { Snippet, Component } from 'svelte'; import type { SVGAttributes, HTMLAttributes } from 'svelte/elements'; type RatingItem = { label: string | null | undefined; rating: number }; interface AdvancedRatingProps { rating?: Snippet; globalText?: Snippet; ratings: RatingItem[]; divClass?: string; spanClass?: string; div2Class?: string; div3Class?: string; span2Class?: string; unit?: string; } interface RatingProps { children?: Snippet; text?: Snippet; divClass?: string; size?: number; total?: number; rating?: number; Icon?: Component; count?: boolean; pClass?: string; } interface RatingCommentProps { children: Snippet; evaluation?: Snippet; helpfullink?: string; abuselink?: string; comment: { id?: string; user: { name?: string; img: { src: string | undefined | null; alt?: string; }; joined?: string; }; total?: number; rating: number; heading?: string; address?: string; datetime?: string; }; } type ReviewType = { name?: string; imgSrc?: string; imgAlt?: string; address?: string; reviewDate?: string; title?: string; rating?: number; item1?: string; item2?: string; item3?: string; }; interface ReviewProps extends HTMLAttributes { children: Snippet; address?: Snippet; item1?: Snippet; item2?: Snippet; item3?: Snippet; review?: ReviewType; articleClass?: string; divClass?: string; div2Class?: string; div3Class?: string; imgClass?: string; ulClass?: string; liClass?: string; } interface ScoreRatingProps { ratings?: { label: string | undefined | null; rating: number }[]; ratings2?: { label: string | undefined | null; rating: number }[]; headerLabel?: { desc1?: string; desc2?: string; desc3?: string; link?: { label: string | undefined | null; url: string }; }; } interface RatingIconProps extends SVGAttributes { fillPercent?: number; fillColor?: string; strokeColor?: string; size?: number; ariaLabel?: string; role?: string; svgClass?: string; iconIndex?: number; groupId?: string; pathd?: string; } export type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps }; ================================================ FILE: src/lib/sidebar/Sidebar.svelte ================================================ {#if isOpen || isLargeScreen} {#if isOpen} {#if backdrop && activateClickOutside} {:else if backdrop && !activateClickOutside} {:else if !backdrop && activateClickOutside} {:else if !backdrop && !activateClickOutside} {/if} {/if} {/if} ================================================ FILE: src/lib/sidebar/SidebarBrand.svelte ================================================ {#if site} {site.name} {site.name} {:else if children} {@render children()} {/if} ================================================ FILE: src/lib/sidebar/SidebarButton.svelte ================================================ ================================================ FILE: src/lib/sidebar/SidebarCta.svelte ================================================ ================================================ FILE: src/lib/sidebar/SidebarDropdownWrapper.svelte ================================================
  • {#if isOpen}
      {@render children()}
    {/if}
    • ================================================ FILE: src/lib/sidebar/SidebarGroup.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/sidebar/SidebarItem.svelte ================================================
  • {#if iconSlot} {@render iconSlot()} {/if} {label} {#if subtext} {@render subtext()} {/if}
    • ================================================ FILE: src/lib/sidebar/index.ts ================================================ import type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, SidebarCtxType, PosisionType, BreakpointType } from './type'; import Sidebar from './Sidebar.svelte'; import SidebarDropdownWrapper from './SidebarDropdownWrapper.svelte'; import SidebarGroup from './SidebarGroup.svelte'; import SidebarItem from './SidebarItem.svelte'; import SidebarButton from './SidebarButton.svelte'; import SidebarCta from './SidebarCta.svelte'; import SidebarBrand from './SidebarBrand.svelte'; import { sidebar, sidebarbutton, sidebarcta, sitebarbrand, sidebardropdownwrapper } from './theme'; export { Sidebar, sidebar, type SidebarProps, SidebarDropdownWrapper, sidebardropdownwrapper, type SidebarDropdownWrapperProps, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarCtxType, SidebarButton, sidebarbutton, type SidebarButtonProps, SidebarCta, sidebarcta, type SidebarCtaProps, SidebarBrand, sitebarbrand, type SidebarBrandProps, type BreakpointType, type PosisionType }; ================================================ FILE: src/lib/sidebar/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const sidebar = tv({ slots: { base: 'top-0 left-0 z-50 w-64 transition-transform bg-gray-50 dark:bg-gray-800', active: 'flex items-center text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700', nonactive: 'flex items-center text-base font-normal text-gray-900 rounded dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700', div: 'overflow-y-auto h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800', backdrop: 'fixed top-0 start-0 z-40 w-full h-full' }, variants: { position: { fixed: { base: 'fixed' }, absolute: { base: 'absolute' }, static: { base: 'static' } }, isOpen: { true: 'block', false: 'hidden' }, breakpoint: { sm: { base: 'sm:block' }, md: { base: 'md:block' }, lg: { base: 'lg:block' }, xl: { base: 'xl:block' }, '2xl': { base: '2xl:block' } }, backdrop: { true: { backdrop: 'bg-gray-900 bg-opacity-75' } } } }); export const sidebarbutton = tv({ base: 'inline-flex items-center p-2 mt-2 ms-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600', variants: { breakpoint: { sm: 'sm:hidden', md: 'md:hidden', lg: 'lg:hidden', xl: 'xl:hidden', '2xl': '2xl:hidden' } } }); export const sidebarcta = tv({ slots: { base: 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900', div: 'flex items-center mb-3', span: 'bg-primary-100 text-primary-800 text-sm font-semibold me-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900' } }); export const sitebarbrand = tv({ slots: { base: 'flex items-center ps-2.5 mb-5', img: 'h-6 me-3 sm:h-7', span: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white' } }); export const sidebardropdownwrapper = tv({ slots: { base: '', btn: 'flex items-center w-full text-base font-normal text-gray-900 rounded transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700', span: 'flex-1 ms-3 text-left whitespace-nowrap', svg: 'h-3 w-3 text-gray-800 dark:text-white', ul: 'py-2 space-y-2' } }); ================================================ FILE: src/lib/sidebar/type.ts ================================================ import { type Writable } from 'svelte/store'; import type { Snippet } from 'svelte'; import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements'; import type { TransitionFunc, ParamsType } from '../types'; type SidebarCtxType = { closeSidebar?: () => void; activeClass?: string; nonActiveClass?: string; isSingle?: boolean; selected?: Writable; activeUrl?: string; }; type BreakpointType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined; type PosisionType = 'fixed' | 'absolute' | 'static' | undefined; interface SidebarProps extends HTMLAttributes { children: Snippet; isOpen?: boolean; closeSidebar?: () => void; activateClickOutside?: boolean; isSingle?: boolean; breakpoint?: BreakpointType; position?: PosisionType; ariaLabel?: string; divClass?: string; nonActiveClass?: string; activeClass?: string; params?: ParamsType; transition?: TransitionFunc; backdrop?: boolean; backdropClass?: string; activeUrl?: string; class?: string; } interface SidebarButtonProps extends HTMLButtonAttributes { breakpoint?: BreakpointType; class?: string; } interface SidebarCtaProps extends HTMLAttributes { children: Snippet; icon?: Snippet; divClass?: string; spanClass?: string; label: string; class?: string; } interface SiteType { name?: string; href?: string; img?: string; } interface SidebarBrandProps extends HTMLAnchorAttributes { children?: Snippet; site?: SiteType; imgClass?: string; spanClass?: string; class?: string; } interface SidebarDropdownWrapperProps extends HTMLButtonAttributes { children: Snippet; arrowup?: Snippet; arrowdown?: Snippet; iconSlot?: Snippet; isOpen?: boolean | undefined; btnClass?: string; label: string | undefined; spanClass?: string; ulClass?: string; params?: ParamsType; transition?: TransitionFunc; svgClass?: string; onclick?: () => void; isSingle?: boolean; class?: string; } interface SidebarGroupProps extends HTMLAttributes { children: Snippet; borderClass?: string; border?: boolean; } interface SidebarItemProps extends HTMLAnchorAttributes { iconSlot?: Snippet; subtext?: Snippet; label?: string; spanClass?: string; activeClass?: string; nonActiveClass?: string; aClass?: string; active?: boolean; } export type { SidebarProps, SidebarDropdownWrapperProps, SidebarGroupProps, SidebarItemProps, SidebarCtxType, SidebarButtonProps, SidebarCtaProps, SidebarBrandProps, BreakpointType, PosisionType }; ================================================ FILE: src/lib/skeleton/CardPlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/ImagePlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/ListPlaceholder.svelte ================================================
    {#each items as _, i}
    0 ? 'pt-4' : '' })}>
    {/each} Loading...
    ================================================ FILE: src/lib/skeleton/Skeleton.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/TestimonialPlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/TextPlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/VideoPlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/WidgetPlaceholder.svelte ================================================
    Loading...
    ================================================ FILE: src/lib/skeleton/index.ts ================================================ import type { CardPlaceholderProps, ImagePlaceholderProps, ListPlaceholderProps, SkeletonProps, SizeVideoType, TextPlaceholderProps, VideoPlaceholderProps } from './type'; import CardPlaceholder from './CardPlaceholder.svelte'; import ImagePlaceholder from './ImagePlaceholder.svelte'; import ListPlaceholder from './ListPlaceholder.svelte'; import Skeleton from './Skeleton.svelte'; import TestimonialPlaceholder from './TestimonialPlaceholder.svelte'; import TextPlaceholder from './TextPlaceholder.svelte'; import VideoPlaceholder from './VideoPlaceholder.svelte'; import WidgetPlaceholder from './WidgetPlaceholder.svelte'; import { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from './theme'; export { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder, cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder, type CardPlaceholderProps, type ImagePlaceholderProps, type ListPlaceholderProps, type SkeletonProps, type TextPlaceholderProps, type VideoPlaceholderProps, type SizeVideoType }; ================================================ FILE: src/lib/skeleton/theme.ts ================================================ import { tv } from 'tailwind-variants'; // card placeholder const cardPlaceholder = tv({ slots: { base: 'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700', imageArea: 'mb-4 flex h-48 items-center justify-center rounded bg-gray-300 dark:bg-gray-700', imageIcon: 'text-gray-200 dark:text-gray-600', line: 'rounded-full bg-gray-200 dark:bg-gray-700', footerArea: 'mt-4 flex items-center space-x-3 rtl:space-x-reverse' }, variants: { size: { sm: { base: 'max-w-sm' }, md: { base: 'max-w-md' }, lg: { base: 'max-w-lg' }, xl: { base: 'max-w-xl' }, '2xl': { base: 'max-w-2xl' } } } }); // ImagePlaceholder const imagePlaceholder = tv({ slots: { base: 'space-y-8 animate-pulse md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center', image: 'flex w-full items-center justify-center rounded bg-gray-300 sm:w-96 dark:bg-gray-700', svg: 'text-gray-200', content: 'w-full', line: 'rounded-full bg-gray-200 dark:bg-gray-700' }, variants: { size: { sm: { image: 'h-32', content: 'space-y-2' }, md: { image: 'h-48', content: 'space-y-3' }, lg: { image: 'h-64', content: 'space-y-4' } }, rounded: { none: { image: 'rounded-none', line: 'rounded-none' }, sm: { image: 'rounded-sm', line: 'rounded-sm' }, md: { image: 'rounded', line: 'rounded' }, lg: { image: 'rounded-lg', line: 'rounded-lg' }, full: { image: 'rounded-full', line: 'rounded-full' } } } }); // ListPlaceholder const listPlaceholder = tv({ slots: { base: 'p-4 space-y-4 max-w-md rounded border border-gray-200 divide-y divide-gray-200 shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700', item: 'flex items-center justify-between', itemContent: '', itemTitle: 'mb-2.5 h-2.5 w-24 rounded-full bg-gray-300 dark:bg-gray-600', itemSubtitle: 'h-2 w-32 rounded-full bg-gray-200 dark:bg-gray-700', itemExtra: 'h-2.5 w-12 rounded-full bg-gray-300 dark:bg-gray-700' }, variants: { size: { sm: { base: 'p-3 space-y-3 max-w-sm md:p-4', itemTitle: 'mb-2 h-2 w-20', itemSubtitle: 'h-1.5 w-28', itemExtra: 'h-2 w-10' }, md: {}, // default size lg: { base: 'p-5 space-y-5 max-w-lg md:p-7', itemTitle: 'mb-3 h-3 w-28', itemSubtitle: 'h-2.5 w-36', itemExtra: 'h-3 w-14' } }, rounded: { none: { base: 'rounded-none' }, sm: { base: 'rounded-sm' }, md: { base: 'rounded' }, lg: { base: 'rounded-lg' }, full: { base: 'rounded-full p-8 md:p-16' } } } }); // Skeleton const skeleton = tv({ slots: { wrapper: 'animate-pulse', line: 'rounded-full bg-gray-200 dark:bg-gray-700' }, variants: { size: { sm: { wrapper: 'max-w-sm' }, md: { wrapper: 'max-w-md' }, lg: { wrapper: 'max-w-lg' }, xl: { wrapper: 'max-w-xl' }, '2xl': { wrapper: 'max-w-2xl' } } } }); // TestimonialPlaceholder const testimonialPlaceholder = tv({ slots: { wrapper: 'animate-pulse', line1: 'rounded-full bg-gray-200 dark:bg-gray-700', line2: 'rounded-full bg-gray-300 dark:bg-gray-700', svg: 'me-2 h-10 w-10 text-gray-200 dark:text-gray-700', subContent: 'mt-4 flex items-center justify-center' } }); // TextPlaceholder const textPlaceholder = tv({ slots: { baseWrapper: 'space-y-2.5 animate-pulse', divWrapper: 'flex items-center space-x-2 rtl:space-x-reverse', lineA: 'rounded-full bg-gray-200 dark:bg-gray-700', lineB: 'rounded-full bg-gray-300 dark:bg-gray-600' }, variants: { size: { sm: { baseWrapper: 'max-w-sm' }, md: { baseWrapper: 'max-w-md' }, lg: { baseWrapper: 'max-w-lg' }, xl: { baseWrapper: 'max-w-xl' }, '2xl': { baseWrapper: 'max-w-2xl' } } } }); // VideoPlaceholder const videoPlaceholder = tv({ base: 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700', variants: { size: { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl' } } }); // WidgetPlaceholder const widgetPlaceholder = tv({ slots: { base: 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700', wrapper: 'mt-4 flex items-baseline space-x-6 rtl:space-x-reverse', hLine: 'rounded-full bg-gray-200 dark:bg-gray-700', vLine: 'w-full rounded-t-lg bg-gray-200 dark:bg-gray-700' } }); export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder }; ================================================ FILE: src/lib/skeleton/type.ts ================================================ import type { HTMLAttributes } from 'svelte/elements'; type CardSizeType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined; interface CardPlaceholderProps extends HTMLAttributes { size?: CardSizeType; class?: string; } type SizeImageType = 'sm' | 'md' | 'lg' | undefined; type RoundedType = 'sm' | 'md' | 'lg' | 'none' | 'full' | undefined; interface ImagePlaceholderProps extends HTMLAttributes { size?: SizeImageType; rounded?: RoundedType; class?: string; } type SizeListType = 'sm' | 'md' | 'lg' | undefined; type RoundedListType = 'sm' | 'md' | 'lg' | 'none' | 'full' | undefined; interface ListPlaceholderProps extends HTMLAttributes { itemNumber?: number; size?: SizeListType; rounded?: RoundedListType; class?: string; } type SizeSkeletonType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined; interface SkeletonProps extends HTMLAttributes { size?: SizeSkeletonType; class?: string; } type SizeTextType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined; interface TextPlaceholderProps extends HTMLAttributes { size?: SizeTextType; class?: string; } type SizeVideoType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | undefined; interface VideoPlaceholderProps extends HTMLAttributes { size?: SizeVideoType; class?: string; } export type { CardPlaceholderProps, ImagePlaceholderProps, ListPlaceholderProps, SkeletonProps, TextPlaceholderProps, VideoPlaceholderProps, SizeVideoType }; ================================================ FILE: src/lib/spinner/Spinner.svelte ================================================ ================================================ FILE: src/lib/spinner/index.ts ================================================ import type { SpinnerProps } from './type'; import Spinner from './Spinner.svelte'; import { spinner } from './theme'; export { Spinner, spinner, type SpinnerProps }; ================================================ FILE: src/lib/spinner/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const spinner = tv({ base: 'inline-block animate-spin text-gray-300', variants: { color: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: 'fill-primary-600', secondary: 'fill-secondary-600', gray: 'fill-gray-600 dark:fill-gray-300', red: 'fill-red-600', orange: 'fill-orange-500', amber: 'fill-amber-500', yellow: 'fill-yellow-400', lime: 'fill-lime-500', green: 'fill-green-500', emerald: 'fill-emerald-500', teal: 'fill-teal-500', cyan: 'fill-cyan-500', sky: 'fill-sky-500', blue: 'fill-blue-600', indigo: 'fill-indigo-600', violet: 'fill-violet-600', purple: 'fill-purple-600', fuchsia: 'fill-fuchsia-600', pink: 'fill-pink-600', rose: 'fill-rose-600' }, size: { '4': 'w-4 h-4', '5': 'w-5 h-5', '6': 'w-6 h-6', '8': 'w-8 h-8', '10': 'w-10 h-10', '12': 'w-12 h-12', '16': 'w-16 h-16' } }, defaultVariants: { color: 'primary', size: '8' } }); ================================================ FILE: src/lib/spinner/type.ts ================================================ import type { SVGAttributes } from 'svelte/elements'; type ColorType = | 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'orange' | 'amber' | 'lime' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'violet' | 'fuchsia' | 'rose' | 'secondary' | undefined; type SizeType = '8' | '4' | '5' | '6' | '10' | '12' | '16' | undefined; interface SpinnerProps extends SVGAttributes { color?: ColorType; size?: SizeType; currentFill?: string; currentColor?: string; class?: string; } export type { SpinnerProps }; ================================================ FILE: src/lib/table/Table.svelte ================================================
    {#if captionSlot} {@render captionSlot()} {/if} {#if tableItems} {:else if children} {@render children()} {/if} {#if footerSlot} {@render footerSlot()} {/if}
    ================================================ FILE: src/lib/table/TableBody.svelte ================================================ {#if bodyItems} {#each bodyItems as row} {#each getCellValues(row) as cellValue} {cellValue ?? ''} {/each} {/each} {:else if children} {@render children()} {/if} ================================================ FILE: src/lib/table/TableBodyCell.svelte ================================================ {#if onclick} {:else if children} {@render children()} {/if} ================================================ FILE: src/lib/table/TableBodyRow.svelte ================================================ {#if children} {@render children()} {/if} ================================================ FILE: src/lib/table/TableHead.svelte ================================================ {#if headItems} {#if headerSlot} {@render headerSlot()} {/if} {#each headItems as item} {getItemText(item)} {/each} {:else if children} {#if defaultRow} {@render children()} {:else} {@render children()} {/if} {/if} ================================================ FILE: src/lib/table/TableHeadCell.svelte ================================================ {#if children} {@render children()} {/if} ================================================ FILE: src/lib/table/TableSearch.svelte ================================================
    {#if header} {@render header()} {/if}
    {#if children} {@render children()} {/if}
    {#if footer} {@render footer()} {/if}
    ================================================ FILE: src/lib/table/index.ts ================================================ import type { TableProps, TableCtxType, TableHeadProps, HeadItemType, TableColrType, TableBodyRowProps, TableBodyCellProps, BodyRow, CellValue, TableBodyProps, TableHeadCellProps, TableSearchProps, TableSearchType, TableItemType } from './type'; import Table from './Table.svelte'; import TableBody from './TableBody.svelte'; import TableBodyCell from './TableBodyCell.svelte'; import TableBodyRow from './TableBodyRow.svelte'; import TableHeadCell from './TableHeadCell.svelte'; import TableHead from './TableHead.svelte'; import TableSearch from './TableSearch.svelte'; import { table, tablebodyrow, tablehead, tablebodycell, tableheadcell } from './theme'; export { Table, table, TableBody, TableBodyCell, tablebodycell, TableBodyRow, tablebodyrow, TableHeadCell, tableheadcell, TableHead, tablehead, TableSearch, type TableProps, type TableCtxType, type TableHeadProps, type HeadItemType, type TableColrType, type TableBodyRowProps, type TableBodyCellProps, type BodyRow, type CellValue, type TableBodyProps, type TableHeadCellProps, type TableSearchProps, type TableSearchType, type TableItemType }; ================================================ FILE: src/lib/table/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const table = tv({ slots: { base: '', table: 'w-full text-left text-sm' }, variants: { color: { // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose default: { table: 'text-gray-500 dark:text-gray-400' }, primary: { table: 'text-primary-100 dark:text-primary-100' }, secondary: { table: 'text-secondary-100 dark:text-secondary-100' }, gray: { table: 'text-gray-100 dark:text-gray-100' }, red: { table: 'text-red-100 dark:text-red-100' }, orange: { table: 'text-orange-100 dark:text-orange-100' }, amber: { table: 'text-amber-100 dark:text-amber-100' }, yellow: { table: 'text-yellow-100 dark:text-yellow-100' }, lime: { table: 'text-lime-100 dark:text-lime-100' }, green: { table: 'text-green-100 dark:text-green-100' }, emerald: { table: 'text-emerald-100 dark:text-emerald-100' }, teal: { table: 'text-teal-100 dark:text-teal-100' }, cyan: { table: 'text-cyan-100 dark:text-cyan-100' }, sky: { table: 'text-sky-100 dark:text-sky-100' }, blue: { table: 'text-blue-100 dark:text-blue-100' }, indigo: { table: 'text-indigo-100 dark:text-indigo-100' }, violet: { table: 'text-violet-100 dark:text-violet-100' }, purple: { table: 'text-purple-100 dark:text-purple-100' }, fuchsia: { table: 'text-fuchsia-100 dark:text-fuchsia-100' }, pink: { table: 'text-pink-100 dark:text-pink-100' }, rose: { table: 'text-rose-100 dark:text-rose-100' } }, shadow: { true: { base: 'shadow-md sm:rounded-lg' } } } }); export const tablebodyrow = tv({ base: '', variants: { color: { default: 'bg-white dark:bg-gray-800 dark:border-gray-700', primary: 'bg-white bg-primary-500 border-primary-400', secondary: 'bg-white bg-secondary-500 border-secondary-400', gray: 'bg-gray-500 border-gray-400', red: 'bg-red-500 border-red-400', orange: 'bg-orange-500 border-orange-400', amber: 'bg-amber-500 border-amber-400', yellow: 'bg-yellow-500 border-yellow-400', lime: 'bg-lime-500 border-lime-400', green: 'bg-white bg-green-500 border-green-400', emerald: 'bg-emerald-500 border-emerald-400', teal: 'bg-teal-500 border-teal-400', cyan: 'bg-cyan-500 border-cyan-400', sky: 'bg-sky-500 border-sky-400', blue: 'bg-white bg-blue-500 border-blue-400', indigo: 'bg-indigo-500 border-indigo-400', violet: 'bg-violet-500 border-violet-400', purple: 'bg-purple-500 border-purple-400', fuchsia: 'bg-fuchsia-500 border-fuchsia-400', pink: 'bg-pink-500 border-pink-400', rose: 'bg-rose-500 border-rose-400' }, hoverable: { true: '' }, striped: { true: '' }, border: { true: 'border-b last:border-b-0' } }, compoundVariants: [ { hoverable: true, color: 'default', class: 'hover:bg-gray-50 dark:hover:bg-gray-600' }, { hoverable: true, color: 'primary', class: 'hover:bg-primary-400 dark:hover:bg-primary-400' }, { hoverable: true, color: 'secondary', class: 'hover:bg-secondary-400 dark:hover:bg-secondary-400' }, { hoverable: true, color: 'gray', class: 'hover:bg-gray-400 dark:hover:bg-gray-400' }, { hoverable: true, color: 'red', class: 'hover:bg-red-400 dark:hover:bg-red-400' }, { hoverable: true, color: 'orange', class: 'hover:bg-orange-400 dark:hover:bg-orange-400' }, { hoverable: true, color: 'amber', class: 'hover:bg-amber-400 dark:hover:bg-amber-400' }, { hoverable: true, color: 'yellow', class: 'hover:bg-yellow-400 dark:hover:bg-yellow-400' }, { hoverable: true, color: 'lime', class: 'hover:bg-lime-400 dark:hover:bg-lime-400' }, { hoverable: true, color: 'green', class: 'hover:bg-green-400 dark:hover:bg-green-400' }, { hoverable: true, color: 'emerald', class: 'hover:bg-emerald-400 dark:hover:bg-emerald-400' }, { hoverable: true, color: 'teal', class: 'hover:bg-teal-400 dark:hover:bg-teal-400' }, { hoverable: true, color: 'cyan', class: 'hover:bg-cyan-400 dark:hover:bg-cyan-400' }, { hoverable: true, color: 'sky', class: 'hover:bg-sky-400 dark:hover:bg-sky-400' }, { hoverable: true, color: 'blue', class: 'hover:bg-blue-400 dark:hover:bg-blue-400' }, { hoverable: true, color: 'indigo', class: 'hover:bg-indigo-400 dark:hover:bg-indigo-400' }, { hoverable: true, color: 'violet', class: 'hover:bg-violet-400 dark:hover:bg-violet-400' }, { hoverable: true, color: 'purple', class: 'hover:bg-purple-400 dark:hover:bg-purple-400' }, { hoverable: true, color: 'fuchsia', class: 'hover:bg-fuchsia-400 dark:hover:bg-fuchsia-400' }, { hoverable: true, color: 'pink', class: 'hover:bg-pink-400 dark:hover:bg-pink-400' }, { hoverable: true, color: 'rose', class: 'hover:bg-rose-400 dark:hover:bg-rose-400' }, { striped: true, color: 'default', class: 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700' }, { striped: true, color: 'primary', class: 'odd:bg-primary-500 even:bg-primary-600 odd:dark:bg-primary-500 even:dark:bg-primary-600' }, { striped: true, color: 'secondary', class: 'odd:bg-secondary-500 even:bg-secondary-600 odd:dark:bg-secondary-500 even:dark:bg-secondary-600' }, { striped: true, color: 'gray', class: 'odd:bg-gray-500 even:bg-gray-600 odd:dark:bg-gray-500 even:dark:bg-gray-600' }, // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose { striped: true, color: 'red', class: 'odd:bg-red-500 even:bg-red-600 odd:dark:bg-red-500 even:dark:bg-red-600' }, { striped: true, color: 'orange', class: 'odd:bg-orange-500 even:bg-orange-600 odd:dark:bg-orange-500 even:dark:bg-orange-600' }, { striped: true, color: 'amber', class: 'odd:bg-amber-500 even:bg-amber-600 odd:dark:bg-amber-500 even:dark:bg-amber-600' }, { striped: true, color: 'yellow', class: 'odd:bg-yellow-500 even:bg-yellow-600 odd:dark:bg-yellow-500 even:dark:bg-yellow-600' }, { striped: true, color: 'lime', class: 'odd:bg-lime-500 even:bg-lime-600 odd:dark:bg-lime-500 even:dark:bg-lime-600' }, { striped: true, color: 'green', class: 'odd:bg-green-500 even:bg-green-600 odd:dark:bg-green-500 even:dark:bg-green-600' }, { striped: true, color: 'emerald', class: 'odd:bg-emerald-500 even:bg-emerald-600 odd:dark:bg-emerald-500 even:dark:bg-emerald-600' }, { striped: true, color: 'teal', class: 'odd:bg-teal-500 even:bg-teal-600 odd:dark:bg-teal-500 even:dark:bg-teal-600' }, { striped: true, color: 'cyan', class: 'odd:bg-cyan-500 even:bg-cyan-600 odd:dark:bg-cyan-500 even:dark:bg-cyan-600' }, { striped: true, color: 'sky', class: 'odd:bg-sky-500 even:bg-sky-600 odd:dark:bg-sky-500 even:dark:bg-sky-600' }, { striped: true, color: 'blue', class: 'odd:bg-blue-500 even:bg-blue-600 odd:dark:bg-blue-500 even:dark:bg-blue-600' }, { striped: true, color: 'indigo', class: 'odd:bg-indigo-500 even:bg-indigo-600 odd:dark:bg-indigo-500 even:dark:bg-indigo-600' }, { striped: true, color: 'violet', class: 'odd:bg-violet-500 even:bg-violet-600 odd:dark:bg-violet-500 even:dark:bg-violet-600' }, { striped: true, color: 'purple', class: 'odd:bg-purple-500 even:bg-purple-600 odd:dark:bg-purple-500 even:dark:bg-purple-600' }, { striped: true, color: 'fuchsia', class: 'odd:bg-fuchsia-500 even:bg-fuchsia-600 odd:dark:bg-fuchsia-500 even:dark:bg-fuchsia-600' }, { striped: true, color: 'pink', class: 'odd:bg-pink-500 even:bg-pink-600 odd:dark:bg-pink-500 even:dark:bg-pink-600' }, { striped: true, color: 'rose', class: 'odd:bg-rose-500 even:bg-rose-600 odd:dark:bg-rose-500 even:dark:bg-rose-600' } ] }); export const tablehead = tv({ base: 'text-xs uppercase', variants: { color: { // default, primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose default: 'text-gray-700 dark:text-gray-400 bg-gray-50 dark:bg-gray-700', primary: 'text-white dark:text-white bg-primary-700 dark:bg-primary-700', secondary: 'text-white dark:text-white bg-secondary-700 dark:bg-secondary-700', gray: 'text-white dark:text-white bg-gray-700 dark:bg-gray-700', red: 'text-white dark:text-white bg-red-700 dark:bg-red-700', orange: 'text-white dark:text-white bg-orange-700 dark:bg-orange-700', amber: 'text-white dark:text-white bg-amber-700 dark:bg-amber-700', yellow: 'text-white dark:text-white bg-yellow-700 dark:bg-yellow-700', lime: 'text-white dark:text-white bg-lime-700 dark:bg-lime-700', green: 'text-white dark:text-white bg-green-700 dark:bg-green-700', emerald: 'text-white dark:text-white bg-emerald-700 dark:bg-emerald-700', teal: 'text-white dark:text-white bg-teal-700 dark:bg-teal-700', cyan: 'text-white dark:text-white bg-cyan-700 dark:bg-cyan-700', sky: 'text-white dark:text-white bg-sky-700 dark:bg-sky-700', blue: 'text-white dark:text-white bg-blue-700 dark:bg-blue-700', indigo: 'text-white dark:text-white bg-indigo-700 dark:bg-indigo-700', violet: 'text-white dark:text-white bg-violet-700 dark:bg-violet-700', purple: 'text-white dark:text-white bg-purple-700 dark:bg-purple-700', fuchsia: 'text-white dark:text-white bg-fuchsia-700 dark:bg-fuchsia-700', pink: 'text-white dark:text-white bg-pink-700 dark:bg-pink-700', rose: 'text-white dark:text-white bg-rose-700 dark:bg-rose-700' }, noborder: { true: '', false: '' }, striped: { true: '', false: '' } }, compoundVariants: [ { color: 'default', noborder: true, class: 'bg-transparent dark:bg-transparent' }, { color: 'default', striped: true, class: 'bg-transparent dark:bg-transparent border-gray-700' }, { striped: true, color: 'blue', class: 'border-blue-400' }, { striped: true, color: 'green', class: 'border-green-400' }, { striped: true, color: 'red', class: 'border-red-400' }, { striped: true, color: 'yellow', class: 'border-yellow-400' }, { striped: true, color: 'purple', class: 'border-purple-400' }, { striped: true, color: 'indigo', class: 'border-indigo-400' }, { striped: true, color: 'pink', class: 'border-pink-400' } ] }); export const tablebodycell = tv({ base: 'px-6 py-4 whitespace-nowrap font-medium' }); export const tableheadcell = tv({ base: 'px-6 py-3' }); ================================================ FILE: src/lib/table/type.ts ================================================ import type { HTMLTableAttributes, HTMLAttributes, HTMLTdAttributes, HTMLThAttributes } from 'svelte/elements'; import type { Snippet } from 'svelte'; type TableCtxType = { striped?: boolean; hoverable?: boolean; noborder?: boolean; color?: TableColrType; }; // prettier-ignore type HeadItemType = string | number | { text: string; [key: string]: string | number | boolean; }; interface TableHeadProps extends HTMLAttributes { children?: Snippet; headerSlot?: Snippet; defaultRow?: boolean; headItems?: HeadItemType[]; class?: string; striped?: boolean; noborder?: boolean; color?: TableColrType; } type TableColrType = | 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'orange' | 'amber' | 'lime' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'violet' | 'fuchsia' | 'rose' | 'secondary' | 'default' | undefined; type TableItemType = Record; interface TableProps extends HTMLTableAttributes { children?: Snippet; footerSlot?: Snippet; captionSlot?: Snippet; divClass?: string; striped?: boolean; hoverable?: boolean; noborder?: boolean; shadow?: boolean; color?: TableColrType; tableItems?: TableItemType[]; class?: string; } interface TableBodyRowProps extends HTMLAttributes { children?: Snippet; class?: string; striped?: boolean; hoverable?: boolean; noborder?: boolean; } interface TableBodyCellProps extends HTMLTdAttributes { children?: Snippet; class?: string; colspan?: number; color?: TableColrType; onclick?: () => void; } type CellValue = string | number | boolean | null | undefined; type BodyRow = CellValue[] | Record; interface TableBodyProps extends HTMLAttributes { children?: Snippet; class?: string; bodyItems?: BodyRow[]; } interface TableHeadCellProps extends HTMLThAttributes { children?: Snippet; class?: string; } type TableSearchType = { striped?: boolean; hoverable?: boolean; color?: string; }; interface TableSearchProps extends HTMLTableAttributes { children?: Snippet; header?: Snippet; footer?: Snippet; divClass?: string; inputValue?: string; striped?: boolean; hoverable?: boolean; customColor?: string; color?: string; innerDivClass?: string; inputClass?: string; searchClass?: string; svgDivClass?: string; svgClass?: string; tableClass?: string; class?: string; placeholder?: string; } export type { TableProps, TableCtxType, TableHeadProps, HeadItemType, TableColrType, TableBodyRowProps, TableBodyCellProps, BodyRow, CellValue, TableBodyProps, TableHeadCellProps, TableSearchProps, TableSearchType, TableItemType }; ================================================ FILE: src/lib/tabs/TabItem.svelte ================================================ ================================================ FILE: src/lib/tabs/Tabs.svelte ================================================
      {@render children()}
    {#if dividerBool}
    {/if}
    ================================================ FILE: src/lib/tabs/index.ts ================================================ import type { TabsProps, TabitemProps, TabCtxType } from './type'; import TabItem from './TabItem.svelte'; import Tabs from './Tabs.svelte'; import { tabs, tabItem } from './theme'; export { TabItem, tabItem, Tabs, tabs, type TabsProps, type TabitemProps, type TabCtxType }; ================================================ FILE: src/lib/tabs/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const tabs = tv({ slots: { base: 'flex flex-wrap space-x-2 rtl:space-x-reverse', content: 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4', divider: 'h-px bg-gray-200 dark:bg-gray-700', active: 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500', inactive: 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300' }, variants: { tabStyle: { full: { active: 'p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:bg-gray-700 dark:text-white', inactive: 'p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700' }, pill: { active: 'py-3 px-4 text-white bg-primary-600 rounded-lg', inactive: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white' }, underline: { base: '-mb-px', active: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 bg-transparent', inactive: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400 bg-transparent' }, none: { active: '', inactive: '' } }, hasDivider: { true: {} } }, compoundVariants: [ { tabStyle: ['full', 'pill'], hasDivider: true, class: { divider: 'hidden' } } ], defaultVariants: { tabStyle: 'none', hasDivider: true } }); export const tabItem = tv({ slots: { base: 'group focus-within:z-10', button: 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed', content: 'hidden' }, variants: { open: { true: { button: 'active' } }, disabled: { true: { button: 'cursor-not-allowed' } } }, compoundVariants: [ { open: true, class: { button: '' // We'll merge this with activeClasses from context } }, { open: false, class: { button: '' // We'll merge this with inactiveClasses from context } } ], defaultVariants: { open: false, disabled: false } }); ================================================ FILE: src/lib/tabs/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes, HTMLLiAttributes } from 'svelte/elements'; import { type Writable } from 'svelte/store'; interface TabsProps extends HTMLAttributes { children: Snippet; tabStyle?: 'full' | 'pill' | 'underline' | 'none'; ulClass?: string; contentClass?: string; divider?: boolean; class?: string; } interface TabitemProps extends HTMLLiAttributes { children?: Snippet; titleSlot?: Snippet; open?: boolean; title?: string; activeClass?: string; inactiveClass?: string; class?: string; disabled?: boolean; tabStyle?: 'full' | 'pill' | 'underline' | 'none'; } interface TabCtxType { activeClass?: string; inactiveClass?: string; tabStyle?: 'full' | 'pill' | 'underline' | 'none'; selected: Writable; panelId: string; } export { type TabsProps, type TabitemProps, type TabCtxType }; ================================================ FILE: src/lib/theme/Theme.svelte ================================================ {@render children()} ================================================ FILE: src/lib/timeline/Activity.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/timeline/ActivityItem.svelte ================================================ {#each activities as { name, date, src, alt, activity }}
  • {@html name}
    {#if activity}
    {@html activity}
    {/if}
    • {/each} ================================================ FILE: src/lib/timeline/Group.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/timeline/GroupItem.svelte ================================================ {#each timelines as { name, src, alt, isPrivate, href, comment }}
  • {@html name}
    {#if comment}
    {comment}
    {/if} {#if isPrivate} Private {:else} Public {/if}
    • {/each} ================================================ FILE: src/lib/timeline/Timeline.svelte ================================================
      {@render children()}
    ================================================ FILE: src/lib/timeline/TimelineItem.svelte ================================================
  • {#if order !== 'default'} {#if orientationSlot && (order === 'vertical' || order === 'horizontal')} {@render orientationSlot()} {:else} {/if} {:else if date} {/if} {#if title}

    {title}

    {/if} {#if order !== 'default'} {#if date} {/if} {/if} {@render children()}
    • ================================================ FILE: src/lib/timeline/index.ts ================================================ import type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat } from './type'; import Activity from './Activity.svelte'; import ActivityItem from './ActivityItem.svelte'; import Group from './Group.svelte'; import GroupItem from './GroupItem.svelte'; import Timeline from './Timeline.svelte'; import TimelineItem from './TimelineItem.svelte'; import { activity, activityitem, group, groupitem, timeline, timelineitem } from './theme'; export { Activity, ActivityItem, Group, GroupItem, Timeline, TimelineItem, activity, activityitem, group, groupitem, timeline, timelineitem, type ActivityType, type ActivityProps, type ActivityItemProps, type GroupTimelineType, type GroupProps, type GroupItemProps, type TimelineProps, type TimelineItemProps, type DateFormat }; ================================================ FILE: src/lib/timeline/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const activity = tv({ base: 'relative border-s border-gray-200 dark:border-gray-700' }); export const activityitem = tv({ slots: { li: 'mb-10 ms-6', span: 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900', img: 'rounded-full shadow-lg', outerDiv: 'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600', innerDiv: 'justify-between items-center mb-3 sm:flex', time: 'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0', title: 'text-sm font-normal text-gray-500 lex dark:text-gray-300', text: 'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300' } }); export const group = tv({ slots: { div: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700', time: 'text-lg font-semibold text-gray-900 dark:text-white', ol: 'mt-3 divide-y divider-gray-200 dark:divide-gray-700' } }); export const groupitem = tv({ slots: { a: 'block items-center p-3 sm:flex hover:bg-gray-100 dark:hover:bg-gray-700', img: 'me-3 mb-3 w-12 h-12 rounded-full sm:mb-0', div: 'text-gray-600 dark:text-gray-400', title: 'text-base font-normal', span: 'inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400' } }); export const timeline = tv({ variants: { order: { group: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700', horizontal: 'sm:flex', activity: 'relative border-s border-gray-200 dark:border-gray-700', vertical: 'relative border-s border-gray-200 dark:border-gray-700', default: 'relative border-s border-gray-200 dark:border-gray-700' } }, defaultVariants: { order: 'default' } }); export const timelineitem = tv({ slots: { li: '', div: '', time: '', h3: '', svg: 'w-3 h-3 text-primary-600 dark:text-primary-400' }, variants: { order: { default: { li: 'mb-10 ms-4', div: 'absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700', time: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500', h3: 'text-lg font-semibold text-gray-900 dark:text-white' }, vertical: { li: 'mb-10 ms-6', div: 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900', time: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500', h3: 'flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white' }, horizontal: { li: 'relative mb-6 sm:mb-0', div: 'flex items-center', time: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500', h3: 'text-lg font-semibold text-gray-900 dark:text-white' }, activity: { li: 'mb-10 ms-6', div: 'flex absolute -start-3 justify-center items-center w-6 h-6 bg-primary-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-primary-900', time: 'mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500', h3: 'text-lg font-semibold text-gray-900 dark:text-white' }, group: { li: '', div: 'p-5 mb-4 bg-gray-50 rounded-lg border border-gray-100 dark:bg-gray-800 dark:border-gray-700', time: 'text-lg font-semibold text-gray-900 dark:text-white', h3: 'text-lg font-semibold text-gray-900 dark:text-white' } } }, defaultVariants: { order: 'default' } }); ================================================ FILE: src/lib/timeline/type.ts ================================================ import type { HTMLOlAttributes, HTMLLiAttributes } from 'svelte/elements'; import type { Snippet } from 'svelte'; interface ActivityType { name: HTMLElement | string; date: Date | string; src: string; alt: string; activity?: HTMLElement | string; } interface GroupTimelineType { name: string | HTMLElement; src: string; alt: string; href?: string; isPrivate?: boolean; comment?: string | HTMLElement; } interface ActivityProps extends HTMLOlAttributes { children: Snippet; class?: string; } interface ActivityItemProps extends HTMLLiAttributes { activities: ActivityType[]; liClass?: string; spanClass?: string; imgClass?: string; outerDivClass?: string; innerDivClass?: string; timeClass?: string; titleClass?: string; textClass?: string; } interface GroupProps extends HTMLOlAttributes { children: Snippet; divClass?: string; timeClass?: string; date?: Date | string; olClass?: string; } interface GroupItemProps extends HTMLLiAttributes { timelines: GroupTimelineType[]; aClass?: string; imgClass?: string; divClass?: string; titleClass?: string; spanClass?: string; } type DateFormat = 'year' | 'month-year' | 'full-date'; interface TimelineProps extends HTMLOlAttributes { children: Snippet; order?: 'default' | 'vertical' | 'horizontal' | 'activity' | 'group'; class?: string; } interface TimelineItemProps extends HTMLLiAttributes { children: Snippet; orientationSlot?: Snippet; title: string; date: string; svgClass?: string; liClass?: string; divClass?: string; timeClass?: string; h3Class?: string; dateFormat?: DateFormat; } export type { ActivityType, ActivityProps, ActivityItemProps, GroupTimelineType, GroupProps, GroupItemProps, TimelineProps, TimelineItemProps, DateFormat }; ================================================ FILE: src/lib/toast/Toast.svelte ================================================ {#if toastStatus} {/if} ================================================ FILE: src/lib/toast/index.ts ================================================ import type { ToastProps } from './type'; import Toast from './Toast.svelte'; import { toast } from './theme'; export { Toast, toast, type ToastProps }; ================================================ FILE: src/lib/toast/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const toast = tv({ slots: { base: 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 gap-3', icon: 'w-8 h-8 inline-flex items-center justify-center shrink-0 rounded-lg', content: 'w-full text-sm font-normal', close: 'ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700' }, variants: { position: { 'top-left': { base: 'absolute top-5 start-5' }, 'top-right': { base: 'absolute top-5 end-5' }, 'bottom-left': { base: 'absolute bottom-5 start-5' }, 'bottom-right': { base: 'absolute bottom-5 end-5' } }, color: { // primary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: { icon: 'text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200', close: 'text-primary-500 dark:text-primary-200 hover:text-primary-600 dark:hover:text-primary-500' }, gray: { icon: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200', close: 'text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-500' }, red: { icon: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200', close: 'text-red-500 dark:text-red-200 hover:text-red-600 dark:hover:text-red-500' }, orange: { icon: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200', close: 'text-orange-500 dark:text-orange-200 hover:text-orange-600 dark:hover:text-orange-500' }, amber: { icon: 'text-amber-500 bg-amber-100 dark:bg-amber-700 dark:text-amber-200', close: 'text-amber-500 dark:text-amber-200 hover:text-amber-600 dark:hover:text-amber-500' }, yellow: { icon: 'text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200', close: 'text-yellow-500 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-500' }, lime: { icon: 'text-lime-500 bg-lime-100 dark:bg-lime-700 dark:text-lime-200', close: 'text-lime-500 dark:text-lime-200 hover:text-lime-600 dark:hover:text-lime-500' }, green: { icon: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200', close: 'text-green-500 dark:text-green-200 hover:text-green-600 dark:hover:text-green-500' }, emerald: { icon: 'text-emerald-500 bg-emerald-100 dark:bg-emerald-800 dark:text-emerald-200', close: 'text-emerald-500 dark:text-emerald-200 hover:text-emerald-600 dark:hover:text-emerald-500' }, teal: { icon: 'text-teal-500 bg-teal-100 dark:bg-teal-800 dark:text-teal-200', close: 'text-teal-500 dark:text-teal-200 hover:text-teal-600 dark:hover:text-teal-500' }, cyan: { icon: 'text-cyan-500 bg-cyan-100 dark:bg-cyan-800 dark:text-cyan-200', close: 'text-cyan-500 dark:text-cyan-200 hover:text-cyan-600 dark:hover:text-cyan-500' }, sky: { icon: 'text-sky-500 bg-sky-100 dark:bg-sky-800 dark:text-sky-200', close: 'text-sky-500 dark:text-sky-200 hover:text-sky-600 dark:hover:text-sky-500' }, blue: { icon: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200', close: 'text-blue-500 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-500' }, indigo: { icon: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200', close: 'text-indigo-500 dark:text-indigo-200 hover:text-indigo-600 dark:hover:text-indigo-500' }, violet: { icon: 'text-violet-500 bg-violet-100 dark:bg-violet-800 dark:text-violet-200', close: 'text-violet-500 dark:text-violet-200 hover:text-violet-600 dark:hover:text-violet-500' }, purple: { icon: 'text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200', close: 'text-purple-500 dark:text-purple-200 hover:text-purple-600 dark:hover:text-purple-500' }, fuchsia: { icon: 'text-fuchsia-500 bg-fuchsia-100 dark:bg-fuchsia-800 dark:text-fuchsia-200', close: 'text-fuchsia-500 dark:text-fuchsia-200 hover:text-fuchsia-600 dark:hover:text-fuchsia-500' }, pink: { icon: 'text-pink-500 bg-pink-100 dark:bg-pink-700 dark:text-pink-200', close: 'text-pink-500 dark:text-pink-200 hover:text-pink-600 dark:hover:text-pink-500' }, rose: { icon: 'text-rose-500 bg-rose-100 dark:bg-rose-700 dark:text-rose-200', close: 'text-rose-500 dark:text-rose-200 hover:text-rose-600 dark:hover:text-rose-500' } }, align: { true: { base: 'items-center' }, false: { base: 'items-start' } } } }); ================================================ FILE: src/lib/toast/type.ts ================================================ import type { Snippet } from 'svelte'; import type { ParamsType, TransitionFunc } from '../types'; import type { HTMLAttributes } from 'svelte/elements'; type ColorType = | 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'orange' | 'amber' | 'lime' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'violet' | 'fuchsia' | 'rose' | undefined; type PositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined; interface ToastProps extends HTMLAttributes { children: Snippet; icon?: Snippet; toastStatus?: boolean; dismissable?: boolean; color?: ColorType; position?: PositionType; baseClass?: string; iconClass?: string; contentClass?: string; align?: boolean; params?: ParamsType; transition?: TransitionFunc; } export { type ToastProps }; ================================================ FILE: src/lib/toolbar/Toolbar.svelte ================================================
    {@render children()}
    {#if end} {@render end()} {/if}
    ================================================ FILE: src/lib/toolbar/ToolbarButton.svelte ================================================ {#if href} {#if name}{name}{/if} {@render children()} {:else} {/if} ================================================ FILE: src/lib/toolbar/ToolbarGroup.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/toolbar/index.ts ================================================ import type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps } from './type'; import Toolbar from './Toolbar.svelte'; import ToolbarButton from './ToolbarButton.svelte'; import ToolbarGroup from './ToolbarGroup.svelte'; import { toolbar, toolbarGroup, toolbarButton } from './theme'; export { Toolbar, toolbar, ToolbarButton, toolbarButton, ToolbarGroup, toolbarGroup, type ToolbarProps, type ToolbarGroupProps, type ToolbarButtonProps }; ================================================ FILE: src/lib/toolbar/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const toolbar = tv({ slots: { base: 'flex justify-between items-center', content: 'flex flex-wrap items-center' }, variants: { embedded: { true: {}, false: { base: 'py-2 px-3' } }, color: { default: {}, primary: { base: 'bg-primary-100 text-primary-800' }, secondary: { base: 'bg-secondary-100 text-secondary-800' } // Add more color variants as needed }, separators: { true: { content: 'sm:divide-x rtl:divide-x-reverse' } } }, compoundVariants: [ { embedded: true, color: 'default', class: { base: 'bg-transparent' } } ] }); export const toolbarGroup = tv({ base: 'flex items-center', variants: { spacing: { default: 'space-x-1 rtl:space-x-reverse', tight: 'space-x-0.5 rtl:space-x-reverse', loose: 'space-x-2 rtl:space-x-reverse' }, padding: { default: 'sm:pe-4 sm:ps-4', none: '' }, position: { middle: '', first: 'sm:ps-0', last: 'sm:pe-0' } }, compoundVariants: [ { position: ['first', 'last'], class: 'sm:px-0' } ] }); export const toolbarButton = tv({ base: 'focus:outline-none whitespace-normal', variants: { color: { dark: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600', gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300', red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300', yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300', green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300', indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300', purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300', pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300', blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300', primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300', default: 'focus:ring-gray-400 hover:bg-gray-100' }, size: { xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5', sm: 'm-0.5 rounded focus:ring-1 p-0.5', md: 'm-0.5 rounded-lg focus:ring-2 p-1.5', lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5' }, background: { true: '', false: '' } }, compoundVariants: [ { color: 'default', background: true, class: 'dark:hover:bg-gray-600' }, { color: 'default', background: false, class: 'dark:hover:bg-gray-700' } ] }); ================================================ FILE: src/lib/toolbar/type.ts ================================================ import { type Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; type ToolbarColor = 'primary' | 'secondary' | 'default' | undefined; interface ToolbarProps extends HTMLAttributes { children: Snippet; end?: Snippet; embedded?: boolean; color?: ToolbarColor; class?: string; } type SpacingType = 'default' | 'tight' | 'loose' | undefined; type PaddingType = 'default' | 'none' | undefined; type PositionType = 'first' | 'last' | 'middle' | undefined; interface ToolbarGroupProps extends HTMLAttributes { children: Snippet; class?: string; spacing?: SpacingType; padding?: PaddingType; position?: PositionType; } type ToolbarButtonType = | 'primary' | 'default' | 'dark' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | undefined; interface ToolbarButtonProps { children: Snippet; color?: ToolbarButtonType; name?: string; ariaLabel?: string; size?: 'xs' | 'sm' | 'md' | 'lg'; href?: string; class?: string; onclick?: () => void; } export type { ToolbarProps, ToolbarGroupProps, ToolbarButtonProps }; ================================================ FILE: src/lib/tooltip/Tooltip.svelte ================================================ {#if isVisible} {/if} ================================================ FILE: src/lib/tooltip/index.ts ================================================ import type { TooltipProps } from './type'; import Tooltip from './Tooltip.svelte'; import { tooltip } from './theme'; export { Tooltip, tooltip, type TooltipProps }; ================================================ FILE: src/lib/tooltip/theme.ts ================================================ import { tv } from 'tailwind-variants'; import type { Placement } from '@floating-ui/dom'; export const tooltip = tv({ slots: { base: 'absolute bg-gray-800 text-white px-2 py-1 rounded text-sm z-50 pointer-events-none', arrowBase: 'absolute w-2 h-2 rotate-45 bg-inherit' }, variants: { color: { default: { base: 'bg-gray-800' }, primary: { base: 'bg-primary-600' }, secondary: { base: 'bg-secondary-600' }, gray: { base: 'bg-gray-600' }, red: { base: 'bg-red-600' }, orange: { base: 'bg-orange-600' }, amber: { base: 'bg-amber-600' }, yellow: { base: 'bg-yellow-400' }, lime: { base: 'bg-lime-600' }, green: { base: 'bg-green-600' }, emerald: { base: 'bg-emerald-600' }, teal: { base: 'bg-teal-600' }, cyan: { base: 'bg-cyan-600' }, sky: { base: 'bg-sky-600' }, blue: { base: 'bg-blue-600' }, indigo: { base: 'bg-indigo-600' }, violet: { base: 'bg-violet-600' }, purple: { base: 'bg-purple-600' }, fuchsia: { base: 'bg-fuchsia-600' }, pink: { base: 'bg-pink-600' }, rose: { base: 'bg-rose-800' } }, arrow: { true: { arrowBase: 'visible' }, false: { arrowBase: 'hidden' } }, position: { top: {}, 'top-start': {}, 'top-end': {}, bottom: {}, 'bottom-start': {}, 'bottom-end': {}, left: {}, 'left-start': {}, 'left-end': {}, right: {}, 'right-start': {}, 'right-end': {} } as Record }, defaultVariants: { color: 'default', arrow: true, position: 'top' } }); ================================================ FILE: src/lib/tooltip/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; import type { Placement, Strategy } from '@floating-ui/dom'; type TooltipColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'default' | undefined; interface TooltipProps extends HTMLAttributes { children: Snippet; triggeredBy?: string; reference?: string; showOn?: 'hover' | 'click'; position?: Placement; color?: TooltipColorType; arrow?: boolean; offset?: number; strategy?: Strategy; visible?: boolean; class?: string; } export { type TooltipProps }; ================================================ FILE: src/lib/types.ts ================================================ import type { TransitionConfig, FadeParams, BlurParams, FlyParams, SlideParams, ScaleParams } from 'svelte/transition'; // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose export type ColorName = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'; export declare const xs = 'xs'; export declare const sm = 'sm'; export declare const md = 'md'; export declare const lg = 'lg'; export declare const xl = 'xl'; export type CloseButtonColorType = | 'dark' | 'default' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none'; export type IndicatorPlacementType = | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined; export interface drawerTransitionParamTypes { amount?: number; delay?: number; duration?: number; easing?: (t: number) => number; opacity?: number; x?: number; y?: number; } export type FormSizeType = 'sm' | 'md' | 'lg'; // export type drawerTransitionTypes = 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur' | undefined; // export type PsizeType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'; // export type PweightType = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'; // export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'; // export type FormColorType = 'blue' | 'red' | 'green' | 'purple' | 'teal' | 'yellow' | 'orange' | 'primary' | 'secondary'; // export type ButtonColorType = 'alternative' | 'blue' | 'dark' | 'green' | 'light' | 'primary' | 'purple' | 'red' | 'yellow' | 'none'; // export type SidebarType = { // activeClass: string | undefined | null; // nonActiveClass: string | undefined | null; // }; // export interface ButtonClassesTypes { // default?: string; // border?: string; // application?: string; // pagination?: string; // group?: string; // card?: string; // meeting?: string; // video?: string; // custom?: string; // } export type navbarType = { navStatus: boolean | undefined; breakPoint: 'md' | 'lg' | 'xl' | 'xxl'; activeClass: string | undefined | null; nonActiveClass: string | undefined | null; closeNav: () => void; }; export type ColorVariant = | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue' | 'primary' | 'none'; // export type BottomNavVariantType = 'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video'; export type DeviceVariantType = | 'default' | 'ios' | 'android' | 'tablet' | 'laptop' | 'desktop' | 'smartwatch'; // export type ProgressBarColorType = 'primary' | 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'purple' | 'indigo'; // export type SpinnerColorType = 'primary' | 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white' | 'custom'; // export type ToastPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'none'; // export type SpaceType = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | undefined; // export type ToolbarButtonType = 'dark' | 'default' | 'gray' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'blue'; export declare type SizeType = typeof xs | typeof sm | typeof md | typeof lg | typeof xl; export type TransitionTypes = | 'fade' | 'fly' | 'slide' | 'blur' | 'in:fly' | 'out:fly' | 'in:slide' | 'out:slide' | 'in:fade' | 'out:fade' | 'in:blur' | 'out:blur'; export interface TransitionParamTypes { delay?: number; duration?: number; easing?: (t: number) => number; css?: (t: number, u: number) => string | undefined | null; tick?: (t: number, u: number) => void; } export type ParamsType = FadeParams | BlurParams | FlyParams | SlideParams | ScaleParams; export type TransitionFunc = (node: HTMLElement, params: ParamsType) => TransitionConfig; export type ModalPlacementType = | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; /* eslint-disable @typescript-eslint/no-explicit-any */ export interface LinkType { name: string; href?: string; rel?: string; active?: boolean; [propName: string]: any; } ================================================ FILE: src/lib/typography/anchor/A.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/anchor/index.ts ================================================ import type { AnchorProps, AnchorColorType } from './type'; import A from './A.svelte'; import { anchor } from './theme'; export { A, anchor, type AnchorProps, type AnchorColorType }; ================================================ FILE: src/lib/typography/anchor/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const anchor = tv({ base: 'inline-flex items-center hover:underline', variants: { color: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: 'text-primary-600 dark:text-primary-500', secondary: 'text-secondary-600 dark:text-secondary-500', gray: 'text-gray-600 dark:text-gray-500', red: 'text-red-600 dark:text-red-500', orange: 'text-orange-600 dark:text-orange-500', amber: 'text-amber-600 dark:text-amber-500', yellow: 'text-yellow-600 dark:text-yellow-500', lime: 'text-lime-600 dark:text-lime-500', green: 'text-green-600 dark:text-green-500', emerald: 'text-emerald-600 dark:text-emerald-500', teal: 'text-teal-600 dark:text-teal-500', cyan: 'text-cyan-600 dark:text-cyan-500', sky: 'text-sky-600 dark:text-sky-500', blue: 'text-blue-600 dark:text-blue-500', indigo: 'text-indigo-600 dark:text-indigo-500', violet: 'text-violet-600 dark:text-violet-500', purple: 'text-purple-600 dark:text-purple-500', fuchsia: 'text-fuchsia-600 dark:text-fuchsia-500', pink: 'text-pink-600 dark:text-pink-500', rose: 'text-rose-600 dark:text-rose-500' } } }); ================================================ FILE: src/lib/typography/anchor/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAnchorAttributes } from 'svelte/elements'; type AnchorColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; interface AnchorProps extends HTMLAnchorAttributes { children: Snippet; color?: AnchorColorType; class?: string; } export { type AnchorProps, type AnchorColorType }; ================================================ FILE: src/lib/typography/blockquote/Blockquote.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/typography/blockquote/index.ts ================================================ import type { BlockquoteProps } from './type'; import Blockquote from './Blockquote.svelte'; import { blockquote } from './theme'; export { Blockquote, blockquote, type BlockquoteProps }; ================================================ FILE: src/lib/typography/blockquote/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const blockquote = tv({ base: 'font-semibold text-gray-900 dark:text-white', variants: { border: { true: 'border-s-4 border-gray-300 dark:border-gray-500', false: '' }, italic: { true: 'italic', false: '' }, bg: { true: 'bg-gray-50 dark:bg-gray-800', false: '' }, alignment: { left: 'text-left', center: 'text-center', right: 'text-right' }, size: { xs: 'text-xs', sm: 'text-sm', base: 'text-base', lg: 'text-lg', xl: 'text-xl', '2xl': 'text-2xl', '3xl': 'text-3xl', '4xl': 'text-4xl', '5xl': 'text-5xl', '6xl': 'text-6xl', '7xl': 'text-7xl', '8xl': 'text-8xl', '9xl': 'text-9xl' } }, defaultVariants: { border: false, italic: true, bg: false, alignment: 'left', size: 'lg' } }); ================================================ FILE: src/lib/typography/blockquote/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLBlockquoteAttributes } from 'svelte/elements'; type SizeType = | 'sm' | 'lg' | 'xl' | '2xl' | 'base' | 'xs' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | undefined; type AlignmentType = 'left' | 'center' | 'right' | undefined; interface BlockquoteProps extends HTMLBlockquoteAttributes { children: Snippet; border?: boolean; italic?: boolean; bg?: boolean; alignment?: AlignmentType; size?: SizeType; class?: string; } export { type BlockquoteProps }; ================================================ FILE: src/lib/typography/descriptionlist/DescriptionList.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/descriptionlist/index.ts ================================================ import type { DescriptionListProps } from './type'; import DescriptionList from './DescriptionList.svelte'; import { descriptionList } from './theme'; export { DescriptionList, descriptionList, type DescriptionListProps }; ================================================ FILE: src/lib/typography/descriptionlist/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const descriptionList = tv({ variants: { tag: { dt: 'text-gray-500 md:text-lg dark:text-gray-400', dd: 'text-lg font-semibold' } }, defaultVariants: { tag: 'dt' } }); ================================================ FILE: src/lib/typography/descriptionlist/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface DescriptionListProps extends HTMLAttributes { children: Snippet; tag: 'dt' | 'dd'; class?: string; } export { type DescriptionListProps }; ================================================ FILE: src/lib/typography/heading/Heading.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/heading/index.ts ================================================ import type { HeadingProps } from './type'; import Heading from './Heading.svelte'; import { heading } from './theme'; export { Heading, heading, type HeadingProps }; ================================================ FILE: src/lib/typography/heading/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const heading = tv({ base: 'font-bold text-gray-900 dark:text-white', variants: { tag: { h1: 'text-5xl font-extrabold', h2: 'text-4xl', h3: 'text-3xl', h4: 'text-2xl', h5: 'text-xl', h6: 'text-lg' } }, defaultVariants: { tag: 'h1' } }); ================================================ FILE: src/lib/typography/heading/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; type TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined; interface HeadingProps extends HTMLAttributes { children: Snippet; tag?: TagType; class?: string; } export { type HeadingProps }; ================================================ FILE: src/lib/typography/hr/Hr.svelte ================================================ {#if children}
    {@render children()}
    {:else}
    {/if} ================================================ FILE: src/lib/typography/hr/index.ts ================================================ import type { HrProps } from './type'; import Hr from './Hr.svelte'; import { hr } from './theme'; export { Hr, hr, type HrProps }; ================================================ FILE: src/lib/typography/hr/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const hr = tv({ slots: { base: 'h-px my-8 bg-gray-200 border-0 dark:bg-gray-700', container: 'inline-flex items-center justify-center w-full', content: 'absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900' }, variants: { withChildren: { true: { base: 'w-full', container: 'relative' } } }, defaultVariants: { withChildren: false } }); ================================================ FILE: src/lib/typography/hr/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface HrProps extends HTMLAttributes { children?: Snippet; divClass?: string; hrClass?: string; iconDivClass?: string; textSpanClass?: string; innerDivClass?: string; } export { type HrProps }; ================================================ FILE: src/lib/typography/img/EnhancedImg.svelte ================================================ {#snippet imageSlot()} {#if caption}
    {@html caption}
    {:else} {/if} {/snippet} {#if href} {@render imageSlot()} {:else} {@render imageSlot()} {/if} ================================================ FILE: src/lib/typography/img/Img.svelte ================================================ {#snippet imageSlot()} {#if caption}
    {@html caption}
    {:else} {/if} {/snippet} {#if href} {@render imageSlot()} {:else} {@render imageSlot()} {/if} ================================================ FILE: src/lib/typography/img/ImgEnhanced.svelte ================================================ {#snippet imageSlot()} {#if caption}
    {@html caption}
    {:else} {/if} {/snippet} {#if href} {@render imageSlot()} {:else} {@render imageSlot()} {/if} ================================================ FILE: src/lib/typography/img/index.ts ================================================ import type { ImgProps, EnhandedImgProps } from './type'; import Img from './Img.svelte'; import EnhancedImg from './EnhancedImg.svelte'; import ImgEnhanced from './ImgEnhanced.svelte'; import { img } from './theme'; export { Img, img, type ImgProps, EnhancedImg, type EnhandedImgProps, ImgEnhanced }; ================================================ FILE: src/lib/typography/img/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const img = tv({ slots: { base: 'max-w-full h-auto', figure: '', figureCaption: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400' }, variants: { size: { xs: { base: 'max-w-xs', figure: 'max-w-xs' }, sm: { base: 'max-w-sm', figure: 'max-w-sm' }, md: { base: 'max-w-md', figure: 'max-w-md' }, lg: { base: 'max-w-lg', figure: 'max-w-lg' }, xl: { base: 'max-w-xl', figure: 'max-w-xl' }, '2xl': { base: 'max-w-2xl', figure: 'max-w-2xl' }, full: { base: 'max-w-full', figure: 'max-w-full' }, none: { base: '', figure: '' } }, alignment: { left: {}, center: { base: 'mx-auto', figure: 'mx-auto' }, right: { base: 'ms-auto', figure: 'ms-auto' } }, effect: { grayscale: { base: 'cursor-pointer rounded-lg grayscale filter transition-all duration-300 hover:grayscale-0' }, blur: { base: 'blur-sm transition-all duration-300 hover:blur-none' }, invert: { base: 'invert filter transition-all duration-300 hover:invert-0' }, sepia: { base: 'sepia filter transition-all duration-300 hover:sepia-0' }, saturate: { base: 'saturate-50 filter transition-all duration-300 hover:saturate-100' }, 'hue-rotate': { base: 'hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0' }, none: { base: 'transition-all duration-300' } }, shadow: { sm: { base: 'shadow-sm' }, regular: { base: 'shadow' }, md: { base: 'shadow-md' }, lg: { base: 'shadow-lg' }, xl: { base: 'shadow-xl' }, '2xl': { base: 'shadow-2xl' }, inner: { base: 'shadow-inner' }, none: { base: 'shadow-none' } }, rounded: { sm: { base: 'rounded-sm' }, regular: { base: 'rounded' }, md: { base: 'rounded-md' }, lg: { base: 'rounded-lg' }, xl: { base: 'rounded-xl' }, '2xl': { base: 'rounded-2xl' }, '3xl': { base: 'rounded-3xl' }, full: { base: 'rounded-full' }, none: { base: 'rounded-none' } } } }); ================================================ FILE: src/lib/typography/img/type.ts ================================================ import type { HTMLImgAttributes } from 'svelte/elements'; import type { Picture } from 'vite-imagetools'; type SizeType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | 'xs' | 'full' | undefined; type AlignmentType = 'left' | 'center' | 'right' | undefined; type EffectType = | 'none' | 'grayscale' | 'blur' | 'invert' | 'sepia' | 'saturate' | 'hue-rotate' | undefined; type ShadowType = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none' | 'regular' | 'inner' | undefined; type RoundedType = | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'none' | 'regular' | '3xl' | undefined; type EnhancedImgAttributes = Omit & { src: string | Picture }; interface ImgProps extends HTMLImgAttributes { size?: SizeType; alignment?: AlignmentType; effect?: EffectType; shadow?: ShadowType; rounded?: RoundedType; caption?: string; imgClass?: string; figClass?: string; captionClass?: string; class?: string; href?: string; } interface EnhandedImgProps extends EnhancedImgAttributes { size?: SizeType; multiple?: boolean; transform?: string; alignment?: AlignmentType; effect?: EffectType; shadow?: ShadowType; rounded?: RoundedType; caption?: string; imgClass?: string; figClass?: string; captionClass?: string; class?: string; href?: string; } export { type ImgProps, type EnhandedImgProps }; ================================================ FILE: src/lib/typography/layout/Layout.svelte ================================================
    {@render children()}
    ================================================ FILE: src/lib/typography/layout/index.ts ================================================ import type { LayoutProps } from './type'; import Layout from './Layout.svelte'; import { layout } from './theme'; export { Layout, layout, type LayoutProps }; ================================================ FILE: src/lib/typography/layout/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const layout = tv({ base: 'grid grid-cols-1 sm:grid-cols-2' }); ================================================ FILE: src/lib/typography/layout/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface LayoutProps extends HTMLAttributes { children: Snippet; class?: string; } export { type LayoutProps }; ================================================ FILE: src/lib/typography/list/Li.svelte ================================================
  • {@render children()}
    • ================================================ FILE: src/lib/typography/list/List.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/list/index.ts ================================================ import type { ListProps, LiProps } from './type'; import List from './List.svelte'; import Li from './Li.svelte'; import { list } from './theme'; export { List, Li, list, type ListProps, type LiProps }; ================================================ FILE: src/lib/typography/list/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const list = tv({ base: '', variants: { tag: { ul: 'list-disc', dl: 'list-none', ol: 'list-decimal' }, position: { inside: 'list-inside', outside: 'list-outside' } }, defaultVariants: { position: 'inside', tag: 'ul' } }); ================================================ FILE: src/lib/typography/list/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLLiAttributes } from 'svelte/elements'; type TagType = 'ul' | 'dl' | 'ol' | undefined; type PositionType = 'inside' | 'outside' | undefined; interface ListProps { children: Snippet; tag?: TagType; position?: PositionType; ctxClass?: string; class?: string; isContenteditable?: boolean; } interface LiProps extends HTMLLiAttributes { children: Snippet; icon?: boolean; class?: string; } export { type ListProps, type LiProps }; ================================================ FILE: src/lib/typography/mark/Mark.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/mark/index.ts ================================================ import type { MarkProps } from './type'; import Mark from './Mark.svelte'; import { mark } from './theme'; export { Mark, mark, type MarkProps }; ================================================ FILE: src/lib/typography/mark/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const mark = tv({ base: 'text-white dark:bg-blue-500 bg-blue-600 px-2 rounded' }); ================================================ FILE: src/lib/typography/mark/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface MarkProps extends HTMLAttributes { children: Snippet; markClass?: string; class?: string; } export { type MarkProps }; ================================================ FILE: src/lib/typography/paragraph/P.svelte ================================================

    {@render children()}

    ================================================ FILE: src/lib/typography/paragraph/index.ts ================================================ import type { ParagraphProps } from './type'; import P from './P.svelte'; import { paragraph } from './theme'; export { P, paragraph, type ParagraphProps }; ================================================ FILE: src/lib/typography/paragraph/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const paragraph = tv({ base: 'text-gray-900 dark:text-white', variants: { size: { xs: 'text-xs', sm: 'text-sm', base: 'text-base', lg: 'text-lg', xl: 'text-xl', '2xl': 'text-2xl', '3xl': 'text-3xl', '4xl': 'text-4xl', '5xl': 'text-5xl', '6xl': 'text-6xl', '7xl': 'text-7xl', '8xl': 'text-8xl', '9xl': 'text-9xl' }, weight: { thin: 'font-thin', extralight: 'font-extralight', light: 'font-light', normal: 'font-normal', medium: 'font-medium', semibold: 'font-semibold', bold: 'font-bold', extrabold: 'font-extrabold', black: 'font-black' }, space: { tighter: 'tracking-tighter', tight: 'tracking-tight', normal: 'tracking-normal', wide: 'tracking-wide', wider: 'tracking-wider', widest: 'tracking-widest' }, height: { none: 'leading-none', tight: 'leading-tight', snug: 'leading-snug', normal: 'leading-normal', relaxed: 'leading-relaxed', loose: 'leading-loose', '3': 'leading-3', '4': 'leading-4', '5': 'leading-5', '6': 'leading-6', '7': 'leading-7', '8': 'leading-8', '9': 'leading-9', '10': 'leading-10' }, align: { left: 'text-left', center: 'text-center', right: 'text-right' }, whitespace: { normal: 'whitespace-normal', nowrap: 'whitespace-nowrap', pre: 'whitespace-pre', preline: 'whitespace-pre-line', prewrap: 'whitespace-pre-wrap' }, italic: { true: 'italic' }, firstUpper: { true: 'first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 dark:first-letter:text-gray-100 first-letter:me-3 first-letter:float-left', false: '' }, justify: { true: 'text-justify', false: '' } } }); ================================================ FILE: src/lib/typography/paragraph/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; type PsizeType = | 'sm' | 'lg' | 'xl' | '2xl' | 'xs' | 'base' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl' | undefined; type PweightType = | 'normal' | 'thin' | 'extralight' | 'light' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | undefined; type SpaceType = 'normal' | 'tighter' | 'tight' | 'wide' | 'wider' | 'widest' | undefined; type HeightType = | 'normal' | 'tight' | 'none' | 'snug' | 'relaxed' | 'loose' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | undefined; type AlignType = 'left' | 'center' | 'right' | undefined; type WhitespaceType = 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap' | undefined; interface ParagraphProps extends HTMLAttributes { children: Snippet; italic?: boolean; firstUpper?: boolean; whitespace?: WhitespaceType; size?: PsizeType; weight?: PweightType; space?: SpaceType; height?: HeightType; align?: AlignType; justify?: boolean; class?: string; } export { type ParagraphProps }; ================================================ FILE: src/lib/typography/secondary/Secondary.svelte ================================================ {@render children()} ================================================ FILE: src/lib/typography/secondary/index.ts ================================================ import type { SecondaryProps } from './type'; import Secondary from './Secondary.svelte'; import { secondary } from './theme'; export { Secondary, secondary, type SecondaryProps }; ================================================ FILE: src/lib/typography/secondary/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const secondary = tv({ base: 'text-gray-500 dark:text-gray-400 font-semibold' }); ================================================ FILE: src/lib/typography/secondary/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; interface SecondaryProps extends HTMLAttributes { children: Snippet; secondaryClass?: string; class?: string; } export { type SecondaryProps }; ================================================ FILE: src/lib/typography/span/Span.svelte ================================================ {#if children} {@render children()} {/if} ================================================ FILE: src/lib/typography/span/index.ts ================================================ import type { SpanProps } from './type'; import Span from './Span.svelte'; import { span } from './theme'; export { Span, span, type SpanProps }; ================================================ FILE: src/lib/typography/span/theme.ts ================================================ import { tv } from 'tailwind-variants'; export const span = tv({ variants: { italic: { true: 'italic' }, underline: { true: 'underline decoration-2 decoration-blue-400 dark:decoration-blue-600' }, linethrough: { true: 'line-through' }, uppercase: { true: 'uppercase' }, gradient: { skyToEmerald: 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400', purpleToBlue: 'text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-blue-500', pinkToOrange: 'text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-400', tealToLime: 'text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-lime-300', redToYellow: 'text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-yellow-500', indigoToCyan: 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-400', fuchsiaToRose: 'text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 to-rose-500', amberToEmerald: 'text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-emerald-500', violetToRed: 'text-transparent bg-clip-text bg-gradient-to-r from-violet-600 to-red-500', blueToGreen: 'text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-teal-500 to-green-400', orangeToPurple: 'text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500', yellowToRed: 'text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-indigo-400 to-red-600', none: '' }, highlight: { blue: 'text-blue-600 dark:text-blue-500', green: 'text-green-600 dark:text-green-500', red: 'text-red-600 dark:text-red-500', yellow: 'text-yellow-600 dark:text-yellow-500', purple: 'text-purple-600 dark:text-purple-500', pink: 'text-pink-600 dark:text-pink-500', indigo: 'text-indigo-600 dark:text-indigo-500', teal: 'text-teal-600 dark:text-teal-500', orange: 'text-orange-600 dark:text-orange-500', cyan: 'text-cyan-600 dark:text-cyan-500', fuchsia: 'text-fuchsia-600 dark:text-fuchsia-500', amber: 'text-amber-600 dark:text-amber-500', lime: 'text-lime-600 dark:text-lime-500', none: '' }, decoration: { solid: 'underline decoratio-solid', double: 'underline decoration-double', dotted: 'underline decoration-dotted', dashed: 'underline decoration-dashed', wavy: 'underline decoration-wavy', none: 'decoration-none' }, decorationColor: { // blue, green, red, yellow, purple, pink, indigo, teal, orange, cyan, fuchsia, amber, lime, none // radio // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose primary: 'underline decoration-primary-400 dark:decoration-primary-600', secondary: 'underline decoration-secondary-400 dark:decoration-secondary-600', gray: 'underline decoration-gray-400 dark:decoration-gray-600', orange: 'underline decoration-orange-400 dark:decoration-orange-600', red: 'underline decoration-red-400 dark:decoration-red-600', yellow: 'underline decoration-yellow-400 dark:decoration-yellow-600', lime: 'underline decoration-lime-400 dark:decoration-lime-600', green: 'underline decoration-green-400 dark:decoration-green-600', emerald: 'underline decoration-emerald-400 dark:decoration-emerald-600', teal: 'underline decoration-teal-400 dark:decoration-teal-600', cyan: 'underline decoration-cyan-400 dark:decoration-cyan-600', sky: 'underline decoration-sky-400 dark:decoration-sky-600', blue: 'underline decoration-blue-400 dark:decoration-blue-600', indigo: 'underline decoration-indigo-400 dark:decoration-indigo-600', violet: 'underline decoration-violet-400 dark:decoration-violet-600', purple: 'underline decoration-purple-400 dark:decoration-purple-600', fuchsia: 'underline decoration-fuchsia-400 dark:decoration-fuchsia-600', pink: 'underline decoration-pink-400 dark:decoration-pink-600', rose: 'underline decoration-rose-400 dark:decoration-rose-600', none: 'decoration-none' }, decorationThickness: { '1': 'underline decoration-1', '2': 'underline decoration-2', '4': 'underline decoration-4', '8': 'underline decoration-8', '0': 'decoration-0' } } }); ================================================ FILE: src/lib/typography/span/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; type DecorationType = 'none' | 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' | undefined; type GradientType = | 'skyToEmerald' | 'purpleToBlue' | 'pinkToOrange' | 'tealToLime' | 'redToYellow' | 'indigoToCyan' | 'fuchsiaToRose' | 'amberToEmerald' | 'violetToRed' | 'blueToGreen' | 'orangeToPurple' | 'yellowToRed' | 'none' | undefined; type HighlightType = | 'none' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'indigo' | 'teal' | 'orange' | 'cyan' | 'fuchsia' | 'amber' | 'lime' | undefined; type DecorationColorType = | 'none' | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'indigo' | 'teal' | 'orange' | 'cyan' | 'fuchsia' | 'lime' | 'primary' | 'secondary' | 'gray' | 'emerald' | 'sky' | 'violet' | 'rose' | undefined; type DecorationThicknessType = '1' | '2' | '4' | '8' | '0' | undefined; interface SpanProps extends HTMLAttributes { children?: Snippet; italic?: boolean; underline?: boolean; linethrough?: boolean; uppercase?: boolean; gradient?: GradientType; highlight?: HighlightType; class?: string; decoration?: DecorationType; decorationThickness?: DecorationThicknessType; decorationColor?: DecorationColorType; } export { type SpanProps }; ================================================ FILE: src/lib/uiHelpers.svelte.ts ================================================ export function uiHelpers() { let isOpen: boolean = $state(false); function toggle() { isOpen = !isOpen; // console.log('toggled', isOpen); } function close() { isOpen = false; // console.log('closed', isOpen); } function open() { isOpen = true; // console.log('opened', isOpen); } return { get isOpen() { return isOpen; }, set isOpen(value: boolean) { isOpen = value; }, toggle, close, open }; } export function clickOutside(element: HTMLElement, callbackFunction?: () => void) { function onClick(event: MouseEvent) { if (typeof callbackFunction === 'function') { const targetNode = event.target as Node | null; if (!element.contains(targetNode)) { callbackFunction(); } } else { console.error('Callback function is not a function'); } } document.body.addEventListener('click', onClick); return { update(newCallbackFunction: () => void) { if (typeof newCallbackFunction === 'function') { callbackFunction = newCallbackFunction; } else { console.error('New callback function is not a function'); } }, destroy() { document.body.removeEventListener('click', onClick); } }; } let n = Date.now(); export function idGenerator() { return (++n).toString(36); } ================================================ FILE: src/lib/utils/CloseButton.svelte ================================================ {#if href} {#if name}{name}{/if} {:else} {/if} ================================================ FILE: src/lib/utils/focusTrap.ts ================================================ // // Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js // // add all the elements inside modal which you want to make focusable import type { Action } from 'svelte/action'; const selectorTabbable = ` a[href], area[href], input:not([disabled]):not([tabindex='-1']), button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']), textarea:not([disabled]):not([tabindex='-1']), iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true] `; const focusTrap: Action = (node) => { const handleFocusTrap = (e: KeyboardEvent) => { const isTabPressed = e.key === 'Tab' || e.keyCode === 9; if (!isTabPressed) { return; } const tabbable = Array.from(node.querySelectorAll(selectorTabbable)).filter( (el): el is HTMLElement => el instanceof HTMLElement && el.hidden !== true ); let index = tabbable.indexOf(document.activeElement as HTMLElement); if (index === -1 && e.shiftKey) index = 0; index += tabbable.length + (e.shiftKey ? -1 : 1); index %= tabbable.length; tabbable[index].focus(); e.preventDefault(); }; document.addEventListener('keydown', handleFocusTrap, true); return { destroy() { document.removeEventListener('keydown', handleFocusTrap, true); } }; }; export default focusTrap; ================================================ FILE: src/lib/utils/index.ts ================================================ import { type ClassValue, clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } import CloseButton from './CloseButton.svelte'; import { tv } from 'tailwind-variants'; const closeButtonVariants = tv({ base: 'focus:outline-none whitespace-normal', variants: { // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose color: { primary: 'text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300', secondary: 'text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300', gray: 'text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300', red: 'text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300', orange: 'text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300', amber: 'text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300', yellow: 'text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300', lime: 'text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300', green: 'text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300', emerald: 'text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300', teal: 'text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300', cyan: 'text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300', sky: 'text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300', blue: 'text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300', indigo: 'text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300', violet: 'text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300', purple: 'text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300', fuchsia: 'text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300', pink: 'text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300', rose: 'text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300' }, size: { xs: 'm-0.5 rounded-sm focus:ring-1 p-0.5', sm: 'm-0.5 rounded focus:ring-1 p-0.5', md: 'm-0.5 rounded-lg focus:ring-2 p-1.5', lg: 'm-0.5 rounded-lg focus:ring-2 p-2.5' } }, defaultVariants: { color: 'gray', size: 'md' }, slots: { svg: '' }, compoundVariants: [ { size: 'xs', class: { svg: 'w-3 h-3' } }, { size: 'sm', class: { svg: 'w-3.5 h-3.5' } }, { size: ['md', 'lg'], class: { svg: 'w-5 h-5' } } ] }); type ColorType = | 'primary' | 'secondary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | undefined; type SizeType = 'md' | 'xs' | 'sm' | 'lg' | undefined; interface CloseButtonProps { color?: ColorType; onclick?: () => void; name?: string; ariaLabel?: string; size?: SizeType; href?: string; class?: string; } export { CloseButton, closeButtonVariants, type CloseButtonProps }; ================================================ FILE: src/lib/video/Video.svelte ================================================ ================================================ FILE: src/lib/video/index.ts ================================================ import type { VideoProps } from './type'; import Video from './Video.svelte'; export { Video, type VideoProps }; ================================================ FILE: src/lib/video/type.ts ================================================ import type { Snippet } from 'svelte'; import type { HTMLVideoAttributes } from 'svelte/elements'; interface VideoProps extends HTMLVideoAttributes { children?: Snippet; type?: string; src?: string; trackSrc?: string; srclang?: string; label?: string; class?: string; } export { type VideoProps }; ================================================ FILE: src/routes/+layout.server.ts ================================================ import { ANALYTICS_ID_RUNES_LIB } from '$env/static/private'; import type { MetaProps } from 'runes-meta-tags'; import { splitAndCapitalize, removeHyphensAndCapitalize } from './utils/helpers'; export const load = ({ url }) => { const title = splitAndCapitalize(url.pathname) ? `${splitAndCapitalize(url.pathname)} - ${removeHyphensAndCapitalize(__NAME__)}` : `${removeHyphensAndCapitalize(__NAME__)}`; const description = splitAndCapitalize(url.pathname) ? `${splitAndCapitalize(url.pathname)} component for Svelte 5 Runes.` : 'A UI library for Svelte 5 Runes.'; const image = splitAndCapitalize(url.pathname) ? `https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib?title=${splitAndCapitalize(url.pathname)}` : 'https://open-graph-vercel.vercel.app/api/svelte-5-ui-lib'; // console.log('url: ', splitAndCapitalize(url.pathname)); const layoutMetaTags: MetaProps = { title, description, keywords: 'svelte, runes, ui, components, library', twitter: { card: 'summary_large_image', site: '@shinokada', handle: '@shinokada', title, description, image, imageAlt: title }, og: { type: 'website', title, description, url: url.href, image, imageAlt: title, siteName: 'Svelte 5 UI Lib', imageWidth: '1200', imageHeight: '630' } }; return { layoutMetaTags, ANALYTICS_ID_RUNES_LIB }; }; ================================================ FILE: src/routes/+layout.svelte ================================================
    {#snippet brand()} svelte icon
    {/snippet} Coverage About Repo