refactor: update theme creation to use generic types for better type …

…safety
themesberg · Jan 18, 2025 · 5bbb2c1 · 5bbb2c1
1 parent 167b371
commit 5bbb2c1
Show file tree

Hide file tree

Showing 43 changed files with 45 additions and 45 deletions.
diff --git a/packages/ui/src/components/Accordion/theme.ts b/packages/ui/src/components/Accordion/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { AccordionTheme } from "./Accordion";
 
-export const accordionTheme: AccordionTheme = createTheme({
+export const accordionTheme = createTheme<AccordionTheme>({
   root: {
     base: "divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700",
     flush: {

diff --git a/packages/ui/src/components/Alert/theme.ts b/packages/ui/src/components/Alert/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { AlertTheme } from "./Alert";
 
-export const alertTheme: AlertTheme = createTheme({
+export const alertTheme = createTheme<AlertTheme>({
   base: "flex flex-col gap-2 p-4 text-sm",
   borderAccent: "border-t-4",
   closeButton: {

diff --git a/packages/ui/src/components/Avatar/theme.ts b/packages/ui/src/components/Avatar/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { AvatarTheme } from "./Avatar";
 
-export const avatarTheme: AvatarTheme = createTheme({
+export const avatarTheme = createTheme<AvatarTheme>({
   root: {
     base: "flex items-center justify-center space-x-4 rounded",
     bordered: "p-1 ring-2",

diff --git a/packages/ui/src/components/Badge/theme.ts b/packages/ui/src/components/Badge/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { BadgeTheme } from "./Badge";
 
-export const badgeTheme: BadgeTheme = createTheme({
+export const badgeTheme = createTheme<BadgeTheme>({
   root: {
     base: "flex h-fit items-center gap-1 font-semibold",
     color: {

diff --git a/packages/ui/src/components/Blockquote/theme.ts b/packages/ui/src/components/Blockquote/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { BlockquoteTheme } from "./Blockquote";
 
-export const blockquoteTheme: BlockquoteTheme = createTheme({
+export const blockquoteTheme = createTheme<BlockquoteTheme>({
   root: {
     base: "text-xl font-semibold italic text-gray-900 dark:text-white",
   },

diff --git a/packages/ui/src/components/Breadcrumb/theme.ts b/packages/ui/src/components/Breadcrumb/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { BreadcrumbTheme } from "./Breadcrumb";
 
-export const breadcrumbTheme: BreadcrumbTheme = createTheme({
+export const breadcrumbTheme = createTheme<BreadcrumbTheme>({
   root: {
     base: "",
     list: "flex items-center",

diff --git a/packages/ui/src/components/Button/theme.ts b/packages/ui/src/components/Button/theme.ts
@@ -2,7 +2,7 @@ import { createTheme } from "../../helpers/create-theme";
 import type { ButtonTheme } from "./Button";
 import type { ButtonGroupTheme } from "./ButtonGroup";
 
-export const buttonTheme: ButtonTheme = createTheme({
+export const buttonTheme = createTheme<ButtonTheme>({
   base: "relative flex items-center justify-center rounded-lg text-center font-medium focus:outline-none focus:ring-4",
   disabled: "pointer-events-none opacity-50",
   fullSized: "w-full",
@@ -61,6 +61,6 @@ export const buttonTheme: ButtonTheme = createTheme({
   },
 });
 
-export const buttonGroupTheme: ButtonGroupTheme = createTheme({
+export const buttonGroupTheme = createTheme<ButtonGroupTheme>({
   base: "inline-flex rounded-md shadow-sm",
 });
diff --git a/packages/ui/src/components/Card/theme.ts b/packages/ui/src/components/Card/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { CardTheme } from "./Card";
 
-export const cardTheme: CardTheme = createTheme({
+export const cardTheme = createTheme<CardTheme>({
   root: {
     base: "flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800",
     children: "flex h-full flex-col justify-center gap-4 p-6",

diff --git a/packages/ui/src/components/Carousel/theme.ts b/packages/ui/src/components/Carousel/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { CarouselTheme } from "./Carousel";
 
-export const carouselTheme: CarouselTheme = createTheme({
+export const carouselTheme = createTheme<CarouselTheme>({
   root: {
     base: "relative h-full w-full",
     leftControl: "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",

diff --git a/packages/ui/src/components/Checkbox/theme.ts b/packages/ui/src/components/Checkbox/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { CheckboxTheme } from "./Checkbox";
 
-export const checkboxTheme: CheckboxTheme = createTheme({
+export const checkboxTheme = createTheme<CheckboxTheme>({
   base: "h-4 w-4 appearance-none rounded border border-gray-300 bg-gray-100 bg-[length:0.55em_0.55em] bg-center bg-no-repeat checked:border-transparent checked:bg-current checked:bg-check-icon focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700",
   color: {
     default: "text-primary-600 focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-primary-600",

diff --git a/packages/ui/src/components/Clipboard/theme.ts b/packages/ui/src/components/Clipboard/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ClipboardTheme } from "./Clipboard";
 
-export const clipboardTheme: ClipboardTheme = createTheme({
+export const clipboardTheme = createTheme<ClipboardTheme>({
   button: {
     base: "inline-flex w-full items-center justify-center rounded-lg bg-blue-700 px-5 py-3 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
     label: "text-center text-sm font-medium text-white sm:w-auto",

diff --git a/packages/ui/src/components/DarkThemeToggle/theme.ts b/packages/ui/src/components/DarkThemeToggle/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { DarkThemeToggleTheme } from "./DarkThemeToggle";
 
-export const darkThemeToggleTheme: DarkThemeToggleTheme = createTheme({
+export const darkThemeToggleTheme = createTheme<DarkThemeToggleTheme>({
   root: {
     base: "rounded-lg p-2.5 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700",
     icon: {

diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
@@ -1,7 +1,7 @@
 import type { DatepickerTheme } from ".";
 import { createTheme } from "../../helpers/create-theme";
 
-export const datePickerTheme: DatepickerTheme = createTheme({
+export const datePickerTheme = createTheme<DatepickerTheme>({
   root: {
     base: "relative",
   },

diff --git a/packages/ui/src/components/Drawer/theme.ts b/packages/ui/src/components/Drawer/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { DrawerTheme } from "./Drawer";
 
-export const drawerTheme: DrawerTheme = createTheme({
+export const drawerTheme = createTheme<DrawerTheme>({
   root: {
     base: "fixed z-40 overflow-y-auto bg-white p-4 transition-transform dark:bg-gray-800",
     backdrop: "fixed inset-0 z-30 bg-gray-900/50 dark:bg-gray-900/80",

diff --git a/packages/ui/src/components/Dropdown/theme.ts b/packages/ui/src/components/Dropdown/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { DropdownTheme } from "./Dropdown";
 
-export const dropdownTheme: DropdownTheme = createTheme({
+export const dropdownTheme = createTheme<DropdownTheme>({
   arrowIcon: "ml-2 h-4 w-4",
   content: "py-1 focus:outline-none",
   floating: {

diff --git a/packages/ui/src/components/FileInput/theme.ts b/packages/ui/src/components/FileInput/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { FileInputTheme } from "./FileInput";
 
-export const fileInputTheme: FileInputTheme = createTheme({
+export const fileInputTheme = createTheme<FileInputTheme>({
   base: "block w-full cursor-pointer rounded-lg border file:-ms-4 file:me-4 file:cursor-pointer file:border-none file:bg-gray-800 file:py-2.5 file:pe-4 file:ps-8 file:text-sm file:font-medium file:leading-[inherit] file:text-white hover:file:bg-gray-700 focus:outline-none focus:ring-1 dark:file:bg-gray-600 dark:hover:file:bg-gray-500",
   sizes: {
     sm: "text-xs",

diff --git a/packages/ui/src/components/Footer/theme.ts b/packages/ui/src/components/Footer/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { FooterTheme } from "./Footer";
 
-export const footerTheme: FooterTheme = createTheme({
+export const footerTheme = createTheme<FooterTheme>({
   root: {
     base: "w-full rounded-lg bg-white shadow md:flex md:items-center md:justify-between dark:bg-gray-800",
     container: "w-full p-6",

diff --git a/packages/ui/src/components/HR/theme.ts b/packages/ui/src/components/HR/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { HRTheme } from "./HR";
 
-export const hrTheme: HRTheme = createTheme({
+export const hrTheme = createTheme<HRTheme>({
   root: {
     base: "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700",
   },

diff --git a/packages/ui/src/components/HelperText/theme.ts b/packages/ui/src/components/HelperText/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { HelperTextTheme } from "./HelperText";
 
-export const helperTextTheme: HelperTextTheme = createTheme({
+export const helperTextTheme = createTheme<HelperTextTheme>({
   root: {
     base: "mt-2 text-sm",
     colors: {

diff --git a/packages/ui/src/components/Kbd/theme.ts b/packages/ui/src/components/Kbd/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { KbdTheme } from "./Kbd";
 
-export const kbdTheme: KbdTheme = createTheme({
+export const kbdTheme = createTheme<KbdTheme>({
   root: {
     base: "rounded-lg border border-gray-200 bg-gray-100 px-2 py-1.5 text-xs font-semibold text-gray-800 dark:border-gray-500 dark:bg-gray-600 dark:text-gray-100",
     icon: "inline-block",

diff --git a/packages/ui/src/components/Label/theme.ts b/packages/ui/src/components/Label/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { LabelTheme } from "./Label";
 
-export const labelTheme: LabelTheme = createTheme({
+export const labelTheme = createTheme<LabelTheme>({
   root: {
     base: "text-sm font-medium",
     disabled: "opacity-50",

diff --git a/packages/ui/src/components/List/theme.ts b/packages/ui/src/components/List/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ListTheme } from "./List";
 
-export const listTheme: ListTheme = createTheme({
+export const listTheme = createTheme<ListTheme>({
   root: {
     base: "list-inside space-y-1 text-gray-500 dark:text-gray-400",
     ordered: {

diff --git a/packages/ui/src/components/ListGroup/theme.ts b/packages/ui/src/components/ListGroup/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ListGroupTheme } from "./ListGroup";
 
-export const listGroupTheme: ListGroupTheme = createTheme({
+export const listGroupTheme = createTheme<ListGroupTheme>({
   root: {
     base: "list-none rounded-lg border border-gray-200 bg-white text-left text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white",
   },

diff --git a/packages/ui/src/components/MegaMenu/theme.ts b/packages/ui/src/components/MegaMenu/theme.ts
@@ -4,7 +4,7 @@ import { dropdownTheme } from "../Dropdown/theme";
 import { navbarTheme } from "../Navbar/theme";
 import type { MegaMenuTheme } from "./MegaMenu";
 
-export const megaMenuTheme: MegaMenuTheme = createTheme({
+export const megaMenuTheme = createTheme<MegaMenuTheme>({
   ...navbarTheme,
   dropdown: {
     base: "",

diff --git a/packages/ui/src/components/Modal/theme.ts b/packages/ui/src/components/Modal/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ModalTheme } from "./Modal";
 
-export const modalTheme: ModalTheme = createTheme({
+export const modalTheme = createTheme<ModalTheme>({
   root: {
     base: "fixed inset-x-0 top-0 z-50 h-screen overflow-y-auto overflow-x-hidden md:inset-0 md:h-full",
     show: {

diff --git a/packages/ui/src/components/Navbar/theme.ts b/packages/ui/src/components/Navbar/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { NavbarTheme } from "./Navbar";
 
-export const navbarTheme: NavbarTheme = createTheme({
+export const navbarTheme = createTheme<NavbarTheme>({
   root: {
     base: "bg-white px-2 py-2.5 sm:px-4 dark:border-gray-700 dark:bg-gray-800",
     rounded: {

diff --git a/packages/ui/src/components/Pagination/theme.ts b/packages/ui/src/components/Pagination/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { PaginationTheme } from "./Pagination";
 
-export const paginationTheme: PaginationTheme = createTheme({
+export const paginationTheme = createTheme<PaginationTheme>({
   base: "",
   layout: {
     table: {

diff --git a/packages/ui/src/components/Popover/theme.ts b/packages/ui/src/components/Popover/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { PopoverTheme } from "./Popover";
 
-export const popoverTheme: PopoverTheme = createTheme({
+export const popoverTheme = createTheme<PopoverTheme>({
   base: "absolute z-20 inline-block w-max max-w-[100vw] rounded-lg border border-gray-200 bg-white shadow-sm outline-none dark:border-gray-600 dark:bg-gray-800",
   content: "z-10 overflow-hidden rounded-[7px]",
   arrow: {

diff --git a/packages/ui/src/components/Progress/theme.ts b/packages/ui/src/components/Progress/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ProgressTheme } from "./Progress";
 
-export const progressTheme: ProgressTheme = createTheme({
+export const progressTheme = createTheme<ProgressTheme>({
   base: "w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700",
   label: "mb-1 flex justify-between font-medium dark:text-white",
   bar: "space-x-2 rounded-full text-center font-medium leading-none text-primary-300 dark:text-primary-100",

diff --git a/packages/ui/src/components/Radio/theme.ts b/packages/ui/src/components/Radio/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { RadioTheme } from "./Radio";
 
-export const radioTheme: RadioTheme = createTheme({
+export const radioTheme = createTheme<RadioTheme>({
   base: "h-4 w-4 appearance-none rounded-full border border-gray-300 bg-gray-100 bg-[length:1em_1em] bg-center bg-no-repeat checked:border-transparent checked:bg-current checked:bg-dot-icon focus:outline-none focus:ring-2 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:checked:border-transparent dark:checked:bg-current",
   color: {
     default: "text-primary-600 focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-primary-600",

diff --git a/packages/ui/src/components/RangeSlider/theme.ts b/packages/ui/src/components/RangeSlider/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { RangeSliderTheme } from "./RangeSlider";
 
-export const rangeSliderTheme: RangeSliderTheme = createTheme({
+export const rangeSliderTheme = createTheme<RangeSliderTheme>({
   root: {
     base: "flex",
   },

diff --git a/packages/ui/src/components/Rating/theme.ts b/packages/ui/src/components/Rating/theme.ts
@@ -2,7 +2,7 @@ import { createTheme } from "../../helpers/create-theme";
 import type { RatingTheme } from "./Rating";
 import type { RatingAdvancedTheme } from "./RatingAdvanced";
 
-export const ratingTheme: RatingTheme = createTheme({
+export const ratingTheme = createTheme<RatingTheme>({
   root: {
     base: "flex items-center",
   },
@@ -17,7 +17,7 @@ export const ratingTheme: RatingTheme = createTheme({
   },
 });
 
-export const ratingAdvancedTheme: RatingAdvancedTheme = createTheme({
+export const ratingAdvancedTheme = createTheme<RatingAdvancedTheme>({
   base: "flex items-center",
   label: "text-sm font-medium text-cyan-600 dark:text-cyan-500",
   progress: {

diff --git a/packages/ui/src/components/Select/theme.ts b/packages/ui/src/components/Select/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { SelectTheme } from "./Select";
 
-export const selectTheme: SelectTheme = createTheme({
+export const selectTheme = createTheme<SelectTheme>({
   base: "flex",
   addon:
     "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",

diff --git a/packages/ui/src/components/Sidebar/theme.ts b/packages/ui/src/components/Sidebar/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { SidebarTheme } from "./Sidebar";
 
-export const sidebarTheme: SidebarTheme = createTheme({
+export const sidebarTheme = createTheme<SidebarTheme>({
   root: {
     base: "h-full",
     collapsed: {

diff --git a/packages/ui/src/components/Spinner/theme.ts b/packages/ui/src/components/Spinner/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { SpinnerTheme } from "./Spinner";
 
-export const spinnerTheme: SpinnerTheme = createTheme({
+export const spinnerTheme = createTheme<SpinnerTheme>({
   base: "inline animate-spin text-gray-200",
   color: {
     default: "fill-primary-600",

diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { TableTheme } from "./Table";
 
-export const tableTheme: TableTheme = createTheme({
+export const tableTheme = createTheme<TableTheme>({
   root: {
     base: "w-full text-left text-sm text-gray-500 dark:text-gray-400",
     shadow: "absolute left-0 top-0 -z-10 h-full w-full rounded-lg bg-white drop-shadow-md dark:bg-black",

diff --git a/packages/ui/src/components/Tabs/theme.ts b/packages/ui/src/components/Tabs/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { TabsTheme } from "./Tabs";
 
-export const tabsTheme: TabsTheme = createTheme({
+export const tabsTheme = createTheme<TabsTheme>({
   base: "flex flex-col gap-2",
   tablist: {
     base: "flex text-center",

diff --git a/packages/ui/src/components/TextInput/theme.ts b/packages/ui/src/components/TextInput/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { TextInputTheme } from "./TextInput";
 
-export const textInputTheme: TextInputTheme = createTheme({
+export const textInputTheme = createTheme<TextInputTheme>({
   base: "flex",
   addon:
     "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-200 px-3 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400",

diff --git a/packages/ui/src/components/Textarea/theme.ts b/packages/ui/src/components/Textarea/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { TextareaTheme } from "./Textarea";
 
-export const textareaTheme: TextareaTheme = createTheme({
+export const textareaTheme = createTheme<TextareaTheme>({
   base: "block w-full rounded-lg border p-2.5 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
   colors: {
     gray: "border-gray-300 bg-gray-50 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500",

diff --git a/packages/ui/src/components/Timeline/theme.ts b/packages/ui/src/components/Timeline/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { TimelineTheme } from "./Timeline";
 
-export const timelineTheme: TimelineTheme = createTheme({
+export const timelineTheme = createTheme<TimelineTheme>({
   root: {
     direction: {
       horizontal: "sm:flex",

diff --git a/packages/ui/src/components/Toast/theme.ts b/packages/ui/src/components/Toast/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ToastTheme } from "./Toast";
 
-export const toastTheme: ToastTheme = createTheme({
+export const toastTheme = createTheme<ToastTheme>({
   root: {
     base: "flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400",
     closed: "opacity-0 ease-out",

diff --git a/packages/ui/src/components/ToggleSwitch/theme.ts b/packages/ui/src/components/ToggleSwitch/theme.ts
@@ -1,7 +1,7 @@
 import { createTheme } from "../../helpers/create-theme";
 import type { ToggleSwitchTheme } from "./ToggleSwitch";
 
-export const toggleSwitchTheme: ToggleSwitchTheme = createTheme({
+export const toggleSwitchTheme = createTheme<ToggleSwitchTheme>({
   root: {
     base: "group flex rounded-lg focus:outline-none",
     active: {