@udixio/ui-react 1.2.0 → 1.4.0

package/dist/lib/effects/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import { ConfigInterface } from '@udixio/theme';
+export declare const ThemeProvider: ({ config }: {
+    config: ConfigInterface;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/lib/effects/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AAS7D,eAAO,MAAM,aAAa,GAAI,YAAY;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,mDAgDpE,CAAC"}

package/dist/lib/effects/index.d.ts

@@ -2,4 +2,5 @@ export * from './ripple';
 export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
+export * from './ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/effects/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/dist/lib/interfaces/navigation-rail-item.interface.d.ts

@@ -1,5 +1,4 @@
 import { ActionOrLink } from '../utils';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
@@ -9,7 +8,7 @@ export type NavProps = {
     label?: string;
     children?: string;
     icon: Icon;
-    iconSelected: IconDefinition;
+    iconSelected: Icon;
     selectedItem?: number | null;
     setSelectedItem?: Dispatch<SetStateAction<number | null>>;
     onItemSelected?: (args: {

package/dist/lib/interfaces/navigation-rail-item.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,cAAc,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,oBAAoB;IACpB,YAAY;IACZ,MAAM;IACN,OAAO;IACP,WAAW;CACZ,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}
+{"version":3,"file":"navigation-rail-item.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail-item.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,oBAAoB;IACpB,YAAY;IACZ,MAAM;IACN,OAAO;IACP,WAAW;CACZ,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IACjE,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "throttle-debounce": "^5.0.2",
-    "clsx": "^2.1.1",
+    "clsx": "^1.1.1",
     "react-textarea-autosize": "^8.5.9",
     "motion": "^12.23.0",
     "tailwind-merge": "^3.3.1",
@@ -35,8 +35,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "1.0.0",
-    "@udixio/tailwind": "1.2.1"
+    "@udixio/theme": "1.2.0",
+    "@udixio/tailwind": "1.4.0"
   },
   "repository": {
     "type": "git",

package/src/lib/components/NavigationRailItem.tsx

@@ -195,7 +195,7 @@ export const NavigationRailItem = ({
             };
             return (
               <motion.span
-                initial={initial}
+                initial={animate}
                 animate={animate}
                 exit={initial}
                 className={styles.label}

package/src/lib/effects/ThemeProvider.tsx

@@ -0,0 +1,58 @@
+import { type ConfigInterface, loader } from '@udixio/theme';
+import { useEffect, useState } from 'react';
+import { TailwindPlugin } from '@udixio/tailwind';
+
+function isValidHexColor(hexColorString: string) {
+  const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  return regex.test(hexColorString);
+}
+
+export const ThemeProvider = ({ config }: { config: ConfigInterface }) => {
+  const [error, setError] = useState<string | null>(null);
+
+  const [outputCss, setOutputCss] = useState<null | string>(null);
+
+  useEffect(() => {
+    if (!isValidHexColor(config.sourceColor)) {
+      setError('Invalid hex color');
+      return;
+    }
+
+    const initTheme = async () => {
+      try {
+        const api = await loader(config);
+
+        api.themes.update({
+          sourceColorHex: config.sourceColor,
+        });
+
+        await api.load();
+
+        setOutputCss(
+          api.plugins.getPlugin(TailwindPlugin).getInstance().outputCss,
+        );
+
+        console.log('Theme loaded');
+      } catch (err) {
+        console.error('Theme loading failed:', err);
+        setError(err instanceof Error ? err.message : 'Theme loading failed');
+      }
+    };
+
+    initTheme();
+  }, [config.sourceColor]);
+  if (error) {
+    console.error('ThemeProvider error:', error);
+    return null;
+  }
+
+  if (!outputCss) {
+    return null;
+  }
+  return (
+    <style
+      type="text/tailwindcss"
+      dangerouslySetInnerHTML={{ __html: outputCss }}
+    />
+  );
+};

package/src/lib/effects/index.ts

@@ -2,3 +2,4 @@ export * from './ripple';
 export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
+export * from './ThemeProvider';

package/src/lib/interfaces/navigation-rail-item.interface.ts

@@ -1,5 +1,4 @@
 import { ActionOrLink } from '../utils';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
@@ -10,7 +9,7 @@ export type NavProps = {
   label?: string;
   children?: string;
   icon: Icon;
-  iconSelected: IconDefinition;
+  iconSelected: Icon;
   selectedItem?: number | null;
   setSelectedItem?: Dispatch<SetStateAction<number | null>>;
   onItemSelected?: (

package/src/udixio.css

@@ -1,4 +1,3 @@
-
 @plugin "@udixio/tailwind" {
   colorKeys: surface, surface-dim, surface-bright, surface-container-lowest, surface-container-low, surface-container, surface-container-high, surface-container-highest, on-surface, on-surface-variant, outline, outline-variant, inverse-surface, inverse-on-surface, primary, primary-dim, on-primary, primary-container, on-primary-container, primary-fixed, primary-fixed-dim, on-primary-fixed, on-primary-fixed-variant, inverse-primary, secondary, secondary-dim, on-secondary, secondary-container, on-secondary-container, secondary-fixed, secondary-fixed-dim, on-secondary-fixed, on-secondary-fixed-variant, tertiary, tertiary-dim, on-tertiary, tertiary-container, on-tertiary-container, tertiary-fixed, tertiary-fixed-dim, on-tertiary-fixed, on-tertiary-fixed-variant, error, error-dim, on-error, error-container, on-error-container, surface-variant, surface-tint, background, on-background;
   fontStyles: display-large fontWeight[400] fontSize[3.5625] lineHeight[4] letterSpacing[-0.015625] fontFamily[expressive], display-medium fontWeight[400] fontSize[2.8125] lineHeight[3.25] fontFamily[expressive], display-small fontWeight[400] fontSize[2.25] lineHeight[2.75] fontFamily[expressive], headline-large fontWeight[400] fontSize[2] lineHeight[2.5] fontFamily[expressive], headline-medium fontWeight[400] fontSize[1.75] lineHeight[2.25] fontFamily[expressive], headline-small fontWeight[400] fontSize[1.5] lineHeight[2] fontFamily[expressive], title-large fontWeight[400] fontSize[1.375] lineHeight[1.75] fontFamily[neutral], title-medium fontWeight[500] fontSize[1] lineHeight[1.5] fontFamily[neutral] letterSpacing[0.009375], title-small fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-large fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-medium fontWeight[500] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], label-small fontWeight[500] fontSize[0.6875] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], body-large fontWeight[400] fontSize[1] lineHeight[1.5625] fontFamily[neutral] letterSpacing[0.03125], body-medium fontWeight[400] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.015625], body-small fontWeight[400] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.025];
@@ -114,7 +113,8 @@
   --color-on-background: #eae3ef;
   }
 }
+
 @theme {
   --font-expressive: "Roboto", "sans-serif";
   --font-neutral: "Roboto", "sans-serif";
-}
+}

package/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 const getUdixioVite = async () => {
   // @ts-expect-error - NX_GRAPH_CREATION is a global variable set by Nx
@@ -10,7 +11,7 @@ const getUdixioVite = async () => {
     return;
   } else {
     const dynamicPath = '@udixio/theme';
-    return (await import(dynamicPath)).udixioVite();
+    return (await import(dynamicPath)).vitePlugin;
   }
 };
 
@@ -24,6 +25,12 @@ export default defineConfig(async () => ({
       entryRoot: 'src',
       tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
+    visualizer({
+      filename: '../../stats/ui-react.html',
+      open: false,
+      gzipSize: true,
+      brotliSize: true,
+    }),
   ],
   // Uncomment this if you are using workers.
   // worker: {
@@ -39,6 +46,7 @@ export default defineConfig(async () => ({
       transformMixedEsModules: true,
     },
     lib: {
+      ssr: true,
       // Could also be a dictionary or array of multiple entry points.
       entry: 'src/index.ts',
       name: '@udixio/ui-react',
@@ -58,8 +66,9 @@ export default defineConfig(async () => ({
         'react-textarea-autosize',
         'tailwind-merge',
         'motion',
-        'motion/react',
         '@udixio/theme',
+        '@udixio/tailwind',
+        'motion/react',
       ],
     },
   },