gantri-components 2.208.0 → 2.210.0

package/dist/styles/index.d.ts

@@ -1,4 +1,5 @@
-export { getButtonsColors, getThemeColor, getThemeSpacing, palette, spacing, lightTheme, darkTheme, createTheme, } from './theme';
+export { getButtonsColors, getThemeColor, getThemeSpacing, palette, spacing, lightTheme, darkTheme, modernLightTheme, modernDarkTheme, createTheme, } from './theme';
+export { themeStyle } from './theme-style';
 export { type PaletteColor as Color } from './theme';
 export { ThemeProvider } from './theme-provider';
 export * from './animations';

package/dist/styles/theme-style.d.ts

@@ -0,0 +1,36 @@
+import { DefaultTheme } from 'styled-components';
+type ThemeStyleValue<P = Record<string, unknown>> = any | ((props: P & {
+    theme: DefaultTheme;
+}) => any);
+type ThemeStyleMap<P = Record<string, unknown>> = Record<string, ThemeStyleValue<P>>;
+/**
+ * Resolves CSS blocks by theme with automatic fallback.
+ *
+ * Resolution order: walks `theme.fallbacks` array and returns the first match.
+ * Typical fallback chain: [theme.id, theme.name] → 'default'.
+ *
+ * Values can be static css blocks or functions that receive the component's props.
+ *
+ * @example
+ * ```ts
+ * // Static css blocks
+ * const StyledCard = styled.div`
+ *   ${themeStyle({
+ *     light: css`background: white;`,
+ *     'modern-dark': css`background: rgba(38, 38, 38, 0.4);`,
+ *   })}
+ * `;
+ *
+ * // Functions that receive component props
+ * const StyledInput = styled.div<{ $size: string }>`
+ *   ${themeStyle<{ $size: string }>({
+ *     'modern-dark': ({ $size }) => getModernDarkInput($size),
+ *     'modern-light': ({ $size }) => getModernLightInput($size),
+ *   })}
+ * `;
+ * ```
+ */
+export declare const themeStyle: <P = Record<string, unknown>>(styles: ThemeStyleMap<P>) => (props: P & {
+    theme: DefaultTheme;
+}) => any;
+export {};

package/dist/styles/theme.d.ts

@@ -165,6 +165,7 @@ declare module 'styled-components' {
                 x: string;
             };
         };
+        fallbacks: string[];
         fonts: {
             boldFontFamily: string;
             boldFontWeight?: Property.FontWeight;
@@ -194,6 +195,7 @@ declare module 'styled-components' {
             regularFontWeight?: Property.FontWeight;
             useCssVariablesForFontFamily?: boolean;
         };
+        id: string;
         name: 'dark' | 'light';
         transitions: {
             base: string;
@@ -222,6 +224,8 @@ export interface ProductColorDetails {
 export declare const productColorsMap: Record<ProductColorCode, ProductColorDetails>;
 export declare const lightTheme: DefaultTheme;
 export declare const darkTheme: DefaultTheme;
+export declare const modernLightTheme: DefaultTheme;
+export declare const modernDarkTheme: DefaultTheme;
 export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
 export declare const getThemeProductColor: (color: ProductColorCode, currentTheme?: DefaultTheme) => string;
 export declare const getThemeSpacing: (property: BoxDimension | string, currentTheme?: DefaultTheme) => string;
@@ -275,7 +279,14 @@ export declare const getButtonsColors: (variant: ButtonVariant, theme?: DefaultT
     borderProcessing?: undefined;
 };
 export declare const createTheme: (config: {
+    /** Base theme to extend from. Accepts 'light', 'dark', or any registered theme id. */
+    base?: string;
     defaults?: Partial<DefaultTheme['defaults']>;
+    /** Fallback chain for themeStyle resolution. Defaults to [id, base name]. */
+    fallbacks?: string[];
+    /** Unique theme identifier. */
+    id?: string;
+    /** @deprecated Use `base` instead. Kept for backward compatibility. */
     theme: 'light' | 'dark';
     typography?: Partial<Omit<DefaultTheme['fonts'], 'useCssVariablesForFontFamily'>>;
 }) => DefaultTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantri-components",
-  "version": "2.208.0",
+  "version": "2.210.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "umd": "dist/index.umd.js",