apply all args to resolveTheme #2

SutuSebastian · SutuSebastian · commit e9ab272f442c · 2024-12-28T23:38:05.000+02:00
diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx
@@ -67,8 +67,8 @@ const AccordionComponent: FC<AccordionProps> = ({
   const provider = useThemeProvider();
   const theme = resolveTheme(
     [accordionTheme.root, provider.theme?.accordion?.root, customTheme],
-    [get(provider.resetTheme, "accordion.root"), get(resetTheme, "root")],
-    [get(provider.applyTheme, "accordion.root"), get(applyTheme, "root")],
+    [get(provider.resetTheme, "accordion.root"), resetTheme],
+    [get(provider.applyTheme, "accordion.root"), applyTheme],
   );
 
   return (
diff --git a/packages/ui/src/components/Accordion/AccordionContent.tsx b/packages/ui/src/components/Accordion/AccordionContent.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
+import { get } from "../../helpers/get";
 import { resolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
@@ -27,8 +28,8 @@ export const AccordionContent: FC<AccordionContentProps> = ({
   const provider = useThemeProvider();
   const theme = resolveTheme(
     [accordionTheme.content, provider.theme?.accordion?.content, customTheme],
-    [get(provider.resetTheme, "carousel"), resetTheme],
-    [get(provider.applyTheme, "carousel"), applyTheme],
+    [get(provider.resetTheme, "accordion.content"), resetTheme],
+    [get(provider.applyTheme, "accordion.content"), applyTheme],
   );
 
   return (
diff --git a/packages/ui/src/components/Accordion/AccordionTitle.tsx b/packages/ui/src/components/Accordion/AccordionTitle.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
+import { get } from "../../helpers/get";
 import { resolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
@@ -40,8 +41,8 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
   const provider = useThemeProvider();
   const theme = resolveTheme(
     [accordionTheme.title, provider.theme?.accordion?.title, customTheme],
-    [get(provider.resetTheme, "carousel"), resetTheme],
-    [get(provider.applyTheme, "carousel"), applyTheme],
+    [get(provider.resetTheme, "accordion.title"), resetTheme],
+    [get(provider.applyTheme, "accordion.title"), applyTheme],
   );
 
   return (
diff --git a/packages/ui/src/components/Button/ButtonGroup.tsx b/packages/ui/src/components/Button/ButtonGroup.tsx
@@ -2,6 +2,7 @@
 
 import type { ComponentProps, FC, ReactElement, ReactNode } from "react";
 import { Children, cloneElement, isValidElement, useMemo } from "react";
+import { get } from "../../helpers/get";
 import { resolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
@@ -71,8 +72,8 @@ export const ButtonGroup: FC<ButtonGroupProps> = ({
   const provider = useThemeProvider();
   const theme = resolveTheme(
     [buttonGroupTheme, provider.theme?.buttonGroup, customTheme],
-    [get(provider.resetTheme, "carousel"), resetTheme],
-    [get(provider.applyTheme, "carousel"), applyTheme],
+    [get(provider.resetTheme, "buttonGroup"), resetTheme],
+    [get(provider.applyTheme, "buttonGroup"), applyTheme],
   );
 
   const items = useMemo(() => processChildren(children, outline, pill), [children, outline, pill]);
diff --git a/packages/ui/src/components/Table/TableCell.tsx b/packages/ui/src/components/Table/TableCell.tsx
@@ -17,14 +17,25 @@ export interface TableCellTheme {
 export interface TableCellProps extends ComponentPropsWithRef<"td">, ThemingProps<TableCellTheme> {}
 
 export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ children, className, theme: customTheme, resetTheme, ...props }, ref) => {
-    const { theme: rootTheme, resetTheme: rootResetTheme } = useTableContext();
-    const { theme: bodyTheme, resetTheme: bodyResetTheme } = useTableBodyContext();
+  ({ children, className, theme: customTheme, resetTheme, applyTheme, ...props }, ref) => {
+    const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme } = useTableContext();
+    const { theme: bodyTheme, resetTheme: bodyResetTheme, applyTheme: bodyApplyTheme } = useTableBodyContext();
 
     const provider = useThemeProvider();
     const theme = resolveTheme(
       [tableTheme.body.cell, provider.theme?.table?.body?.cell, rootTheme?.body?.cell, bodyTheme?.cell, customTheme],
-      [get(rootResetTheme, "body.cell"), get(bodyResetTheme, "cell"), resetTheme],
+      [
+        get(provider.resetTheme, "table.body.cell"),
+        get(rootResetTheme, "body.cell"),
+        get(bodyResetTheme, "cell"),
+        resetTheme,
+      ],
+      [
+        get(provider.applyTheme, "table.body.cell"),
+        get(rootApplyTheme, "body.cell"),
+        get(bodyApplyTheme, "cell"),
+        applyTheme,
+      ],
     );
 
     return (
diff --git a/packages/ui/src/components/Table/TableHeadCell.tsx b/packages/ui/src/components/Table/TableHeadCell.tsx
@@ -17,14 +17,25 @@ export interface TableHeadCellTheme {
 export interface TableHeadCellProps extends ComponentPropsWithRef<"th">, ThemingProps<TableHeadCellTheme> {}
 
 export const TableHeadCell = forwardRef<HTMLTableCellElement, TableHeadCellProps>(
-  ({ children, className, theme: customTheme, resetTheme, ...props }, ref) => {
-    const { theme: rootTheme, resetTheme: rootResetTheme } = useTableContext();
-    const { theme: headTheme, resetTheme: headResetTheme } = useTableHeadContext();
+  ({ children, className, theme: customTheme, resetTheme, applyTheme, ...props }, ref) => {
+    const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme } = useTableContext();
+    const { theme: headTheme, resetTheme: headResetTheme, applyTheme: headApplyTheme } = useTableHeadContext();
 
     const provider = useThemeProvider();
     const theme = resolveTheme(
       [tableTheme.head.cell, provider.theme?.table?.head?.cell, rootTheme?.head?.cell, headTheme?.cell, customTheme],
-      [get(rootResetTheme, "head.cell"), get(headResetTheme, "cell"), resetTheme],
+      [
+        get(provider.resetTheme, "table.head.cell"),
+        get(rootResetTheme, "head.cell"),
+        get(headResetTheme, "cell"),
+        resetTheme,
+      ],
+      [
+        get(provider.applyTheme, "table.head.cell"),
+        get(rootApplyTheme, "head.cell"),
+        get(headApplyTheme, "cell"),
+        applyTheme,
+      ],
     );
 
     return (
diff --git a/packages/ui/src/components/Table/TableRow.tsx b/packages/ui/src/components/Table/TableRow.tsx
@@ -18,13 +18,20 @@ export interface TableRowTheme {
 export interface TableRowProps extends ComponentPropsWithRef<"tr">, ThemingProps<TableRowTheme> {}
 
 export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ children, className, theme: customTheme, resetTheme, ...props }, ref) => {
-    const { theme: rootTheme, resetTheme: rootResetTheme, hoverable, striped } = useTableContext();
+  ({ children, className, theme: customTheme, resetTheme, applyTheme, ...props }, ref) => {
+    const {
+      theme: rootTheme,
+      resetTheme: rootResetTheme,
+      applyTheme: rootApplyTheme,
+      hoverable,
+      striped,
+    } = useTableContext();
 
     const provider = useThemeProvider();
     const theme = resolveTheme(
       [tableTheme.row, provider.theme?.table?.row, rootTheme?.row, customTheme],
-      [get(rootResetTheme, "row"), resetTheme],
+      [get(provider.resetTheme, "table.row"), get(rootResetTheme, "row"), resetTheme],
+      [get(provider.applyTheme, "table.row"), get(rootApplyTheme, "row"), applyTheme],
     );
 
     return (
diff --git a/packages/ui/src/components/Timeline/Timeline.tsx b/packages/ui/src/components/Timeline/Timeline.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { ComponentProps, FC } from "react";
+import { get } from "../../helpers/get";
 import { resolveTheme } from "../../helpers/resolve-theme";
 import { twMerge } from "../../helpers/tailwind-merge";
 import { useThemeProvider } from "../../theme/provider";
@@ -34,13 +35,18 @@ const TimelineComponent: FC<TimelineProps> = ({
   horizontal,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
   const provider = useThemeProvider();
-  const theme = resolveTheme([timelineTheme, provider.theme?.timeline, customTheme], [resetTheme]);
+  const theme = resolveTheme(
+    [timelineTheme, provider.theme?.timeline, customTheme],
+    [get(provider.resetTheme, "timeline"), resetTheme],
+    [get(provider.applyTheme, "timeline"), applyTheme],
+  );
 
   return (
-    <TimelineContext.Provider value={{ theme: customTheme, resetTheme, horizontal }}>
+    <TimelineContext.Provider value={{ theme: customTheme, resetTheme, applyTheme, horizontal }}>
       <ol
         data-testid="timeline-component"
         className={twMerge(
diff --git a/packages/ui/src/components/Timeline/TimelineBody.tsx b/packages/ui/src/components/Timeline/TimelineBody.tsx
@@ -22,11 +22,16 @@ export const TimelineBody: FC<TimelineBodyProps> = ({
   className,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme } = useTimelineContext();
-  const { theme: itemTheme, resetTheme: itemResetTheme } = useTimelineItemContext();
-  const { theme: contentTheme, resetTheme: contentResetTheme } = useTimelineContentContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme } = useTimelineContext();
+  const { theme: itemTheme, resetTheme: itemResetTheme, applyTheme: itemApplyTheme } = useTimelineItemContext();
+  const {
+    theme: contentTheme,
+    resetTheme: contentResetTheme,
+    applyTheme: contentApplyTheme,
+  } = useTimelineContentContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
@@ -39,11 +44,19 @@ export const TimelineBody: FC<TimelineBodyProps> = ({
       customTheme,
     ],
     [
+      get(provider.resetTheme, "timeline.item.content.body"),
       get(rootResetTheme, "item.content.body"),
       get(itemResetTheme, "content.body"),
       get(contentResetTheme, "body"),
       resetTheme,
     ],
+    [
+      get(provider.applyTheme, "timeline.item.content.body"),
+      get(rootApplyTheme, "item.content.body"),
+      get(itemApplyTheme, "content.body"),
+      get(contentApplyTheme, "body"),
+      applyTheme,
+    ],
   );
 
   return (
diff --git a/packages/ui/src/components/Timeline/TimelineContent.tsx b/packages/ui/src/components/Timeline/TimelineContent.tsx
@@ -32,10 +32,11 @@ export const TimelineContent: FC<TimelineContentProps> = ({
   className,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme, horizontal } = useTimelineContext();
-  const { theme: itemTheme, resetTheme: itemResetTheme } = useTimelineItemContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme, horizontal } = useTimelineContext();
+  const { theme: itemTheme, resetTheme: itemResetTheme, applyTheme: itemApplyTheme } = useTimelineItemContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
@@ -46,11 +47,22 @@ export const TimelineContent: FC<TimelineContentProps> = ({
       itemTheme?.content,
       customTheme,
     ],
-    [get(rootResetTheme, "item.content"), get(itemResetTheme, "content"), resetTheme],
+    [
+      get(provider.resetTheme, "timeline.item.content"),
+      get(rootResetTheme, "item.content"),
+      get(itemResetTheme, "content"),
+      resetTheme,
+    ],
+    [
+      get(provider.applyTheme, "timeline.item.content"),
+      get(rootApplyTheme, "item.content"),
+      get(itemApplyTheme, "content"),
+      applyTheme,
+    ],
   );
 
   return (
-    <TimelineContentContext.Provider value={{ theme: customTheme, resetTheme }}>
+    <TimelineContentContext.Provider value={{ theme: customTheme, resetTheme, applyTheme }}>
       <div
         data-testid="timeline-content"
         className={twMerge(theme.root.base, horizontal ? theme.root.horizontal : theme.root.vertical, className)}
diff --git a/packages/ui/src/components/Timeline/TimelineItem.tsx b/packages/ui/src/components/Timeline/TimelineItem.tsx
@@ -28,18 +28,20 @@ export const TimelineItem: FC<TimelineItemProps> = ({
   className,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme, horizontal } = useTimelineContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme, horizontal } = useTimelineContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
     [timelineTheme.item, provider.theme?.timeline?.item, rootTheme?.item, customTheme],
-    [get(rootResetTheme, "item"), resetTheme],
+    [get(provider.resetTheme, "timeline.item"), get(rootResetTheme, "item"), resetTheme],
+    [get(provider.applyTheme, "timeline.item"), get(rootApplyTheme, "item"), applyTheme],
   );
 
   return (
-    <TimelineItemContext.Provider value={{ theme: customTheme, resetTheme }}>
+    <TimelineItemContext.Provider value={{ theme: customTheme, resetTheme, applyTheme }}>
       <li
         data-testid="timeline-item"
         className={twMerge(horizontal && theme.root.horizontal, !horizontal && theme.root.vertical, className)}
diff --git a/packages/ui/src/components/Timeline/TimelinePoint.tsx b/packages/ui/src/components/Timeline/TimelinePoint.tsx
@@ -36,10 +36,11 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
   icon: Icon,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme, horizontal } = useTimelineContext();
-  const { theme: itemTheme, resetTheme: itemResetTheme } = useTimelineItemContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme, horizontal } = useTimelineContext();
+  const { theme: itemTheme, resetTheme: itemResetTheme, applyTheme: itemApplyTheme } = useTimelineItemContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
@@ -50,7 +51,18 @@ export const TimelinePoint: FC<TimelnePointProps> = ({
       itemTheme?.point,
       customTheme,
     ],
-    [get(rootResetTheme, "item.point"), get(itemResetTheme, "point"), resetTheme],
+    [
+      get(provider.resetTheme, "timeline.item.point"),
+      get(rootResetTheme, "item.point"),
+      get(itemResetTheme, "point"),
+      resetTheme,
+    ],
+    [
+      get(provider.applyTheme, "timeline.item.point"),
+      get(rootApplyTheme, "item.point"),
+      get(itemApplyTheme, "point"),
+      applyTheme,
+    ],
   );
 
   return (
diff --git a/packages/ui/src/components/Timeline/TimelineTime.tsx b/packages/ui/src/components/Timeline/TimelineTime.tsx
@@ -22,11 +22,16 @@ export const TimelineTime: FC<TimelineTimeProps> = ({
   className,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme } = useTimelineContext();
-  const { theme: itemTheme, resetTheme: itemResetTheme } = useTimelineItemContext();
-  const { theme: contentTheme, resetTheme: contentResetTheme } = useTimelineContentContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme } = useTimelineContext();
+  const { theme: itemTheme, resetTheme: itemResetTheme, applyTheme: itemApplyTheme } = useTimelineItemContext();
+  const {
+    theme: contentTheme,
+    resetTheme: contentResetTheme,
+    applyTheme: contentApplyTheme,
+  } = useTimelineContentContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
@@ -39,11 +44,19 @@ export const TimelineTime: FC<TimelineTimeProps> = ({
       customTheme,
     ],
     [
+      get(provider.resetTheme, "timeline.item.content.time"),
       get(rootResetTheme, "item.content.time"),
       get(itemResetTheme, "content.time"),
       get(contentResetTheme, "time"),
       resetTheme,
     ],
+    [
+      get(provider.applyTheme, "timeline.item.content.time"),
+      get(rootApplyTheme, "item.content.time"),
+      get(itemApplyTheme, "content.time"),
+      get(contentApplyTheme, "time"),
+      applyTheme,
+    ],
   );
 
   return (
diff --git a/packages/ui/src/components/Timeline/TimelineTitle.tsx b/packages/ui/src/components/Timeline/TimelineTitle.tsx
@@ -26,11 +26,16 @@ export const TimelineTitle: FC<TimelineTitleProps> = ({
   className,
   theme: customTheme,
   resetTheme,
+  applyTheme,
   ...props
 }) => {
-  const { theme: rootTheme, resetTheme: rootResetTheme } = useTimelineContext();
-  const { theme: itemTheme, resetTheme: itemResetTheme } = useTimelineItemContext();
-  const { theme: contentTheme, resetTheme: contentResetTheme } = useTimelineContentContext();
+  const { theme: rootTheme, resetTheme: rootResetTheme, applyTheme: rootApplyTheme } = useTimelineContext();
+  const { theme: itemTheme, resetTheme: itemResetTheme, applyTheme: itemApplyTheme } = useTimelineItemContext();
+  const {
+    theme: contentTheme,
+    resetTheme: contentResetTheme,
+    applyTheme: contentApplyTheme,
+  } = useTimelineContentContext();
 
   const provider = useThemeProvider();
   const theme = resolveTheme(
@@ -43,11 +48,19 @@ export const TimelineTitle: FC<TimelineTitleProps> = ({
       customTheme,
     ],
     [
+      get(provider.resetTheme, "timeline.item.content.title"),
       get(rootResetTheme, "item.content.title"),
       get(itemResetTheme, "content.title"),
       get(contentResetTheme, "title"),
       resetTheme,
     ],
+    [
+      get(provider.applyTheme, "timeline.item.content.title"),
+      get(rootApplyTheme, "item.content.title"),
+      get(itemApplyTheme, "content.title"),
+      get(contentApplyTheme, "title"),
+      applyTheme,
+    ],
   );
 
   return (
diff --git a/packages/ui/src/components/Toast/ToastToggle.tsx b/packages/ui/src/components/Toast/ToastToggle.tsx
diff --git a/packages/ui/src/helpers/resolve-theme.ts b/packages/ui/src/helpers/resolve-theme.ts
