Theme provider

src/lib/theme/index.ts

@@ -1 +1,11 @@
 // export {getTheme} from './themeUtils'
+import type { ClassValue } from "clsx";
+import * as themes from "./themes";
+
+
+export type ThemeConfig = {
+    [K in keyof typeof themes]?:
+    typeof themes[K]["slots"] extends undefined ? ClassValue : Partial<{ [L in keyof typeof themes[K]["slots"]]: ClassValue }>;
+};
+
+

src/lib/theme/themes.ts

@@ -0,0 +1,79 @@
+
+export { accordion, accordionItem } from "../accordion";
+export { alert } from "../alert";
+export { avatar } from "../avatar";
+export { badge } from "../badge";
+export { banner } from "../banner";
+export { bottomNav, bottomNavHeader, bottomNavHeaderItem, bottomNavItem } from "../bottom-navigation";
+export { breadcrumb, breadcrumbItem } from "../breadcrumb";
+export { buttonGroup } from "../button-group";
+export { button, gradientButton } from "../buttons";
+export { card } from "../card";
+export { carousel, carouselIndicators, controlButton, thumbnail, thumbnails } from "../carousel";
+export { clipboard } from "../clipboard";
+export { darkmode } from "../darkmode";
+export { datepicker } from "../datepicker";
+export { android, desktop, ios, tablet } from "../device-mockups";
+export { drawer } from "../drawer";
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from "../dropdown";
+export { footer, footerBrand, footerCopyright, footerIcon, footerLink, footerLinkGroup } from "../footer";
+export { gallery } from "../gallery";
+export { indicator } from "../indicator";
+export { kbd } from "../kbd";
+export { listGroup, listGroupItem } from "../list-group";
+export { megamenu } from "../mega-menu";
+export { modal } from "../modal";
+export { navbar, navbarBrand, navbarHamburger, navbarLi, navbarUl } from "../navbar";
+export { pagination, paginationButton, paginationItem, paginationNav } from "../pagination";
+export { popover } from "../popover";
+export { progressbar, progressradial } from "../progress";
+export { advancedRating, rating, review, scoreRating } from "../rating";
+export { sidebar, sidebarBrand, sidebarButton, sidebarCta, sidebarDropdownWrapper } from "../sidebar";
+export { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "../skeleton";
+export { speedDial, speedDialButton } from "../speed-dial";
+export { spinner } from "../spinner";
+export { stepIndicator } from "../stepindicator";
+export { stepper, progressStepper, verticalStepper, detailedStepper, breadcrumbStepper, timelineStepper } from "../stepper";
+export { table, tableBodyCell, tableBodyRow, tableHead, tableHeadCell, tableSearch } from "../table";
+export { tabs, tabItem } from "../tabs";
+export { timeline, activity, activityItem, group, groupItem, timelineItem } from "../timeline";
+export { toast } from "../toast";
+export { toolbar, toolbarButton, toolbarGroup } from "../toolbar";
+export { tooltip } from "../tooltip";
+// export {utils} from "../utils";
+// export {} from "../video";
+
+// forms
+// export {addon} from "../forms/input-addon";
+export { buttonToggle, buttonToggleGroup } from "../forms/button-toggle";
+export { checkbox, checkboxbutton } from "../forms/checkbox";
+export { dropzone } from "../forms/dropzone";
+export { fileupload } from "../forms/fileupload";
+export { floatingLabelInput } from "../forms/floating-label";
+export { helper } from "../forms/helper";
+export { input } from "../forms/input-field";
+export { label } from "../forms/label";
+export { phoneinput } from "../forms/phoneinput";
+export { radio, radiobutton } from "../forms/radio";
+export { range } from "../forms/range";
+export { search } from "../forms/search";
+export { select, multiSelect } from "../forms/select";
+export { tags } from "../forms/tags";
+export { textarea } from "../forms/textarea";
+export { timepicker } from "../forms/timepicker";
+export { toggle } from "../forms/toggle";
+
+// typography
+export { anchor } from "../typography/anchor";
+export { blockquote } from "../typography/blockquote";
+export { descriptionList } from "../typography/descriptionlist";
+export { heading } from "../typography/heading";
+export { hr } from "../typography/hr";
+export { img } from "../typography/img";
+export { layout } from "../typography/layout";
+export { list } from "../typography/list";
+export { mark } from "../typography/mark";
+export { paragraph } from "../typography/paragraph";
+export { secondary } from "../typography/secondary";
+export { span } from "../typography/span";
+

src/lib/types.ts

@@ -1740,9 +1740,11 @@ export interface TabCtxType {
 }
 
 // theme
-export interface ThemeConfig {
-  [key: string]: ClassValue | ThemeConfig;
-}
+//export interface ThemeConfig {
+//  [key: string]: ClassValue | ThemeConfig;
+//}
+
+export type { ThemeConfig } from "$lib/theme";
 
 // timeline
 export interface ActivityType {

src/routes/examples/theme-provider/theme.svelte

@@ -1,54 +1,54 @@
 <script lang="ts">
-  import { ThemeProvider, Accordion, AccordionItem, Alert, Avatar, Badge, Heading, Banner, P, BottomNav, BottomNavItem, Breadcrumb, BreadcrumbItem, ButtonGroup, Button, GradientButton, Card } from "$lib";
+  import { Accordion, AccordionItem, Alert, Avatar, Badge, Banner, BottomNav, BottomNavItem, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Card, GradientButton, Heading, P, ThemeProvider } from "$lib";
   // theme types
-  import type { ThemeConfig, AccordionTheme, AccordionItemTheme, AlertTheme, AvatarTheme, BadgeTheme, BannerTheme, BottomNavTheme, BottomNavItemTheme, BreadcrumbTheme, BreadcrumbItemTheme, ButtonGroupTheme, ButtonTheme, GradientButtonTheme, CardTheme, ParagraphTheme, HeadingTheme } from "$lib";
+  import type { ThemeConfig } from "$lib";
 
-  import { HomeSolid, WalletSolid, AdjustmentsVerticalOutline, UserCircleSolid } from "flowbite-svelte-icons";
+  import { AdjustmentsVerticalOutline, HomeSolid, UserCircleSolid, WalletSolid } from "flowbite-svelte-icons";
 
   const theme: ThemeConfig = {
-    accordion: "w-96 text-green-500" as AccordionTheme,
-    accordionitem: {
+    accordion: "w-96 text-green-500",
+    accordionItem: {
       button: "text-purple-500"
-    } as AccordionItemTheme,
-    alert: "bg-green-500 text-white w-48" as AlertTheme,
-    avatar: "bg-blue-50 text-green-700 ring-red-400 dark:ring-red-300" as AvatarTheme,
+    },
+    alert: "bg-green-500 text-white w-48",
+    avatar: "bg-blue-50 text-green-700 ring-red-400 dark:ring-red-300",
     badge: {
       base: "bg-purple-400 text-white"
-    } as BadgeTheme,
+    },
     banner: {
       base: "mx-auto bg-yellow-400 border-blue-600"
-    } as BannerTheme,
+    },
     bottomNav: {
-      outer: "border-red-500"
-    } as BottomNavTheme,
+      inner: "border-red-500"
+    },
     bottomNavItem: {
       base: "bg-blue-200",
       span: "bg-green-400"
-    } as BottomNavItemTheme,
+    },
     breadcrumb: {
       list: "bg-blue-100"
-    } as BreadcrumbTheme,
+    },
     breadcrumbItem: {
       separator: "text-green-500"
-    } as BreadcrumbItemTheme,
-    buttonGroup: "shadow-lg *:ring-primary-700!" as ButtonGroupTheme,
+    },
+    buttonGroup: "shadow-lg *:ring-primary-700!",
     button: {
       base: "w-48",
       outline: "",
       shadow: ""
-    } as ButtonTheme,
+    },
     gradientButton: {
       base: "",
       outlineWrapper: ""
-    } as GradientButtonTheme,
+    },
     card: {
       base: "bg-red-50 w-72 p-4 sm:p-6 md:p-8",
       image: ""
-    } as CardTheme,
-    heading: "my-8" as HeadingTheme
+    },
+    heading: "my-8"
   };
-  const theme2 = {
-    p: "me-8 flex items-center text-lg font-normal text-blue-500 md:me-0 dark:text-blue-400" as ParagraphTheme
+  const theme2: ThemeConfig = {
+    paragraph: "me-8 flex items-center text-lg font-normal text-blue-500 md:me-0 dark:text-blue-400"
   };
   const theme3 = {
     heading: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
@@ -86,11 +86,11 @@
         <P>Content</P>
       </ThemeProvider>
     </Banner>
-    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, voluptas natus!</P>
+    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, volup!</P>
   </div>
   <Heading tag="h2">Bottom Navigation</Heading>
   <div class="relative h-96 w-96 border p-4">
-    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, voluptas natus!</P>
+    <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus unde ratione voluptatibus ex nobis nostrum eum aliquid sit vitae odio tempora a impedit ducimus omnis, itaque illo? Illo, volup!</P>
     <BottomNav position="absolute" innerClass="grid-cols-4">
       <BottomNavItem btnName="Home">
         <HomeSolid />