@udixio/ui-react 1.6.4 → 2.1.0

package/dist/lib/config/config.interface.d.ts

@@ -0,0 +1,4 @@
+import { ConfigInterface as ConfigTheme, FontPluginOptions } from '@udixio/theme';
+import { TailwindPluginOptions } from '@udixio/tailwind';
+export type ConfigInterface = Omit<ConfigTheme, 'plugins' | 'isDark'> & TailwindPluginOptions & FontPluginOptions;
+//# sourceMappingURL=config.interface.d.ts.map

package/dist/lib/config/config.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/config/config.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,iBAAiB,EAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,QAAQ,CAAC,GACnE,qBAAqB,GACrB,iBAAiB,CAAC"}

package/dist/lib/config/define-config.d.ts

@@ -0,0 +1,4 @@
+import { ConfigInterface } from './config.interface';
+import { ConfigInterface as ConfigTheme } from '@udixio/theme';
+export declare function defineConfig(configObject: ConfigInterface): ConfigTheme;
+//# sourceMappingURL=define-config.d.ts.map

package/dist/lib/config/define-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-config.d.ts","sourceRoot":"","sources":["../../../src/lib/config/define-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EACL,eAAe,IAAI,WAAW,EAI/B,MAAM,eAAe,CAAC;AAGvB,wBAAgB,YAAY,CAAC,YAAY,EAAE,eAAe,GAAG,WAAW,CAMvE"}

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

@@ -0,0 +1,3 @@
+export * from './config.interface';
+export * from './define-config';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,7 @@
+export type AnimateOnScrollOptions = {
+    prefix?: string;
+    once?: boolean;
+};
+export declare function initAnimateOnScroll(options?: AnimateOnScrollOptions): () => void;
+export declare const AnimateOnScrollInit: typeof initAnimateOnScroll;
+//# sourceMappingURL=AnimateOnScroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateOnScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/AnimateOnScroll.ts"],"names":[],"mappings":"AAyHA,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,sBAA2B,GAAG,MAAM,IAAI,CAyIpF;AAGD,eAAO,MAAM,mBAAmB,4BAAsB,CAAC"}

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

@@ -1,7 +1,8 @@
 import { API, ConfigInterface } from '@udixio/theme';
-export declare const ThemeProvider: ({ config, throttleDelay, onLoad, }: {
-    config: ConfigInterface;
+export declare const ThemeProvider: ({ config, throttleDelay, onLoad, loadTheme, }: {
+    config: Readonly<ConfigInterface>;
     onLoad?: (api: API) => void;
     throttleDelay?: number;
+    loadTheme?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AASvE,eAAO,MAAM,aAAa,GAAI,oCAI3B;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,mDAoFA,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EACR,KAAK,eAAe,EAGrB,MAAM,eAAe,CAAC;AASvB,eAAO,MAAM,aAAa,GAAI,+CAK3B;IACD,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,mDAuGA,CAAC"}

package/dist/lib/effects/block-scroll.effect.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+type ScrollIntent = {
+    type: 'intent';
+    source: 'wheel' | 'touch' | 'keyboard';
+    deltaX: number;
+    deltaY: number;
+    originalEvent: Event;
+} | {
+    type: 'scrollbar';
+    scrollTop: number;
+    scrollLeft: number;
+    maxScrollTop: number;
+    maxScrollLeft: number;
+};
+type BlockScrollProps = {
+    onScroll?: (evt: ScrollIntent) => void;
+    touch?: boolean;
+    el: HTMLElement;
+};
+export declare const BlockScroll: React.FC<BlockScrollProps>;
+export {};
+//# sourceMappingURL=block-scroll.effect.d.ts.map

package/dist/lib/effects/block-scroll.effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/block-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,KAAK,YAAY,GACb;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,KAAK,CAAC;CACtB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEN,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,EAAE,WAAW,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqJlD,CAAC"}

package/dist/lib/effects/custom-scroll/custom-scroll.effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-scroll.effect.d.ts","sourceRoot":"","sources":["../../../../src/lib/effects/custom-scroll/custom-scroll.effect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,eAAO,MAAM,YAAY,GAAI,0FAQ1B,UAAU,CAAC,qBAAqB,CAAC,4CA+QnC,CAAC"}
+{"version":3,"file":"custom-scroll.effect.d.ts","sourceRoot":"","sources":["../../../../src/lib/effects/custom-scroll/custom-scroll.effect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,eAAO,MAAM,YAAY,GAAI,0FAQ1B,UAAU,CAAC,qBAAqB,CAAC,4CA0RnC,CAAC"}

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

@@ -3,4 +3,5 @@ export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
 export * from './ThemeProvider';
+export * from './AnimateOnScroll';
 //# 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;AACrC,cAAc,iBAAiB,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;AAChC,cAAc,mBAAmB,CAAC"}

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

@@ -0,0 +1,5 @@
+export type InitAnimationOptions = {
+    once?: boolean;
+};
+export declare function initScrollViewFallback(options?: InitAnimationOptions): () => void;
+//# sourceMappingURL=scrollDriven.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollDriven.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/scrollDriven.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAqKF,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,oBAAyB,SAlKpD,IAAI,CAuOxB"}

package/dist/lib/effects/smooth-scroll.effect.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
 import { CustomScrollInterface } from './custom-scroll';
 import { ReactProps } from '../utils';
-export declare const SmoothScroll: ({ children, transition, orientation, throttleDuration, ...restProps }: {
-    children: ReactNode;
-    transition?: string;
-} & ReactProps<CustomScrollInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const SmoothScroll: ({ transition, orientation, throttleDuration, }: {
+    transition?: {
+        duration?: number;
+    };
+} & ReactProps<CustomScrollInterface>) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=smooth-scroll.effect.d.ts.map

package/dist/lib/effects/smooth-scroll.effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAgB,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,YAAY,GAAI,uEAM1B;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,UAAU,CAAC,qBAAqB,CAAC,4CAuEpC,CAAC"}
+{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,eAAO,MAAM,YAAY,GAAI,gDAI1B;IACD,UAAU,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GAAG,UAAU,CAAC,qBAAqB,CAAC,mDA6GpC,CAAC"}

package/dist/lib/index.d.ts

@@ -4,4 +4,5 @@ export * from './icon';
 export * from './interfaces';
 export * from './styles';
 export * from './utils';
+export * from './config';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/lib/styles/fab.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAmDpB,CAAC"}
+{"version":3,"file":"fab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8DA2CpB,CAAC"}

package/dist/scrollDriven-AP2yWhzi.js

@@ -0,0 +1,121 @@
+let y = !1, h = null;
+function C() {
+  if (typeof window > "u") return !1;
+  try {
+    if (window.CSS && typeof window.CSS.supports == "function")
+      return CSS.supports("animation-timeline: view()") || CSS.supports("animation-timeline: scroll()") || CSS.supports("view-timeline-name: --a");
+  } catch {
+  }
+  return !1;
+}
+function F() {
+  return typeof window > "u" || !("matchMedia" in window) ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function V(n, t) {
+  return getComputedStyle(n).getPropertyValue(t).trim() || null;
+}
+function b(n) {
+  if (!n) return null;
+  const t = n.split(/\s+/), e = t[t.length - 1];
+  if (!e) return null;
+  if (e.endsWith("%")) {
+    const r = parseFloat(e);
+    if (!isNaN(r)) return Math.max(0, Math.min(100, r)) / 100;
+  }
+  return null;
+}
+function L(n) {
+  const t = V(n, "--udx-range-start"), e = V(n, "--udx-range-end"), r = b(t) ?? 0.2, a = b(e) ?? 0.5, o = Math.max(0, Math.min(1, r)), l = Math.max(o + 1e-3, Math.min(1, a));
+  return { start: o, end: l };
+}
+function i(n, t) {
+  if (!n) return null;
+  const e = n.trim(), r = parseFloat(e);
+  return isNaN(r) ? null : r;
+}
+function p(n, t, e) {
+  return n + (t - n) * e;
+}
+function N(n, t, e, r) {
+  const a = t.opacity != null ? Number(t.opacity) : 1, o = e.opacity != null ? Number(e.opacity) : 1, l = p(a, o, r);
+  n.style.opacity = String(l);
+  const v = i(t["--tw-enter-translate-x"]) ?? i(t["--tw-exit-translate-x"]) ?? 0, g = i(t["--tw-enter-translate-y"]) ?? i(t["--tw-exit-translate-y"]) ?? 0, c = i(e["--tw-enter-translate-x"]) ?? i(e["--tw-exit-translate-x"]) ?? 0, u = i(e["--tw-enter-translate-y"]) ?? i(e["--tw-exit-translate-y"]) ?? 0, S = i(t["--tw-enter-scale"]) ?? i(t["--tw-exit-scale"]) ?? 1, M = i(e["--tw-enter-scale"]) ?? i(e["--tw-exit-scale"]) ?? 1, P = i(t["--tw-enter-rotate"]) ?? i(t["--tw-exit-rotate"]) ?? 0, f = i(e["--tw-enter-rotate"]) ?? i(e["--tw-exit-rotate"]) ?? 0, x = p(v, c, r), s = p(g, u, r), d = p(S, M, r), m = p(P, f, r), w = [];
+  (x !== 0 || s !== 0) && w.push(`translate3d(${x}px, ${s}px, 0)`), d !== 1 && w.push(`scale(${d})`), m !== 0 && w.push(`rotate(${m}deg)`), n.style.transform = w.length ? w.join(" ") : "none";
+}
+function T(n) {
+  const t = n.classList, e = t.contains("animate-in"), r = t.contains("animate-out");
+  if (!e && !r) return null;
+  const a = getComputedStyle(n), o = {
+    opacity: i(a.getPropertyValue("--tw-enter-opacity")) ?? void 0,
+    "--tw-enter-translate-x": a.getPropertyValue("--tw-enter-translate-x") || void 0,
+    "--tw-enter-translate-y": a.getPropertyValue("--tw-enter-translate-y") || void 0,
+    "--tw-enter-scale": a.getPropertyValue("--tw-enter-scale") || void 0,
+    "--tw-enter-rotate": a.getPropertyValue("--tw-enter-rotate") || void 0
+  }, l = {
+    opacity: i(a.getPropertyValue("--tw-exit-opacity")) ?? void 0,
+    "--tw-exit-translate-x": a.getPropertyValue("--tw-exit-translate-x") || void 0,
+    "--tw-exit-translate-y": a.getPropertyValue("--tw-exit-translate-y") || void 0,
+    "--tw-exit-scale": a.getPropertyValue("--tw-exit-scale") || void 0,
+    "--tw-exit-rotate": a.getPropertyValue("--tw-exit-rotate") || void 0
+  };
+  return e ? {
+    from: o,
+    to: { opacity: 1, "--tw-enter-translate-x": "0", "--tw-enter-translate-y": "0", "--tw-enter-scale": "1", "--tw-enter-rotate": "0" }
+  } : r ? {
+    from: { opacity: 1, "--tw-exit-translate-x": "0", "--tw-exit-translate-y": "0", "--tw-exit-scale": "1", "--tw-exit-rotate": "0" },
+    to: l
+  } : null;
+}
+function $() {
+  const n = [
+    ".udx-view",
+    ".udx-view-x",
+    ".udx-view-y",
+    ".udx-view-inline",
+    ".udx-view-block",
+    "[data-udx-view]"
+  ].map((t) => `${t}.animate-in, ${t}.animate-out`).join(", ");
+  return Array.from(document.querySelectorAll(n));
+}
+function k(n = {}) {
+  if (y) return h || (() => {
+  });
+  if (typeof window > "u") return () => {
+  };
+  if (C() || F())
+    return y = !0, () => {
+    };
+  y = !0;
+  const t = n.once ?? !0, e = /* @__PURE__ */ new WeakSet();
+  let r = null;
+  const a = () => {
+    const v = $(), g = window.innerHeight || 0;
+    for (const c of v) {
+      const u = c.getBoundingClientRect(), S = Math.min(u.bottom, g) - Math.max(u.top, 0), M = Math.max(0, Math.min(S, u.height)), P = u.height > 0 ? M / u.height : 0, { start: f, end: x } = L(c);
+      let s = (P - f) / (x - f);
+      s = Math.max(0, Math.min(1, s)), t && e.has(c) && s < 1 && (s = 1);
+      const d = T(c);
+      if (!d) continue;
+      const { from: m, to: w } = d;
+      N(c, m, w, s), s >= 1 && t && e.add(c);
+    }
+  }, o = () => {
+    r == null && (r = window.requestAnimationFrame(() => {
+      r = null, a();
+    }));
+  };
+  a(), window.addEventListener("scroll", o, { passive: !0 }), window.addEventListener("resize", o);
+  const l = new MutationObserver(() => {
+    o();
+  });
+  return l.observe(document.documentElement, {
+    childList: !0,
+    subtree: !0,
+    attributes: !0
+  }), h = () => {
+    window.removeEventListener("scroll", o), window.removeEventListener("resize", o), r != null && cancelAnimationFrame(r), l.disconnect(), y = !1, h = null;
+  }, h;
+}
+export {
+  k as initScrollViewFallback
+};

package/dist/scrollDriven-DWAu7CR0.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let m=!1,g=null;function C(){if(typeof window>"u")return!1;try{if(window.CSS&&typeof window.CSS.supports=="function")return CSS.supports("animation-timeline: view()")||CSS.supports("animation-timeline: scroll()")||CSS.supports("view-timeline-name: --a")}catch{}return!1}function F(){return typeof window>"u"||!("matchMedia"in window)?!1:window.matchMedia("(prefers-reduced-motion: reduce)").matches}function P(n,t){return getComputedStyle(n).getPropertyValue(t).trim()||null}function V(n){if(!n)return null;const t=n.split(/\s+/),e=t[t.length-1];if(!e)return null;if(e.endsWith("%")){const r=parseFloat(e);if(!isNaN(r))return Math.max(0,Math.min(100,r))/100}return null}function T(n){const t=P(n,"--udx-range-start"),e=P(n,"--udx-range-end"),r=V(t)??.2,a=V(e)??.5,o=Math.max(0,Math.min(1,r)),l=Math.max(o+.001,Math.min(1,a));return{start:o,end:l}}function i(n,t){if(!n)return null;const e=n.trim(),r=parseFloat(e);return isNaN(r)?null:r}function p(n,t,e){return n+(t-n)*e}function k(n,t,e,r){const a=t.opacity!=null?Number(t.opacity):1,o=e.opacity!=null?Number(e.opacity):1,l=p(a,o,r);n.style.opacity=String(l);const v=i(t["--tw-enter-translate-x"])??i(t["--tw-exit-translate-x"])??0,h=i(t["--tw-enter-translate-y"])??i(t["--tw-exit-translate-y"])??0,c=i(e["--tw-enter-translate-x"])??i(e["--tw-exit-translate-x"])??0,u=i(e["--tw-enter-translate-y"])??i(e["--tw-exit-translate-y"])??0,S=i(t["--tw-enter-scale"])??i(t["--tw-exit-scale"])??1,M=i(e["--tw-enter-scale"])??i(e["--tw-exit-scale"])??1,b=i(t["--tw-enter-rotate"])??i(t["--tw-exit-rotate"])??0,f=i(e["--tw-enter-rotate"])??i(e["--tw-exit-rotate"])??0,x=p(v,c,r),s=p(h,u,r),d=p(S,M,r),y=p(b,f,r),w=[];(x!==0||s!==0)&&w.push(`translate3d(${x}px, ${s}px, 0)`),d!==1&&w.push(`scale(${d})`),y!==0&&w.push(`rotate(${y}deg)`),n.style.transform=w.length?w.join(" "):"none"}function L(n){const t=n.classList,e=t.contains("animate-in"),r=t.contains("animate-out");if(!e&&!r)return null;const a=getComputedStyle(n),o={opacity:i(a.getPropertyValue("--tw-enter-opacity"))??void 0,"--tw-enter-translate-x":a.getPropertyValue("--tw-enter-translate-x")||void 0,"--tw-enter-translate-y":a.getPropertyValue("--tw-enter-translate-y")||void 0,"--tw-enter-scale":a.getPropertyValue("--tw-enter-scale")||void 0,"--tw-enter-rotate":a.getPropertyValue("--tw-enter-rotate")||void 0},l={opacity:i(a.getPropertyValue("--tw-exit-opacity"))??void 0,"--tw-exit-translate-x":a.getPropertyValue("--tw-exit-translate-x")||void 0,"--tw-exit-translate-y":a.getPropertyValue("--tw-exit-translate-y")||void 0,"--tw-exit-scale":a.getPropertyValue("--tw-exit-scale")||void 0,"--tw-exit-rotate":a.getPropertyValue("--tw-exit-rotate")||void 0};return e?{from:o,to:{opacity:1,"--tw-enter-translate-x":"0","--tw-enter-translate-y":"0","--tw-enter-scale":"1","--tw-enter-rotate":"0"}}:r?{from:{opacity:1,"--tw-exit-translate-x":"0","--tw-exit-translate-y":"0","--tw-exit-scale":"1","--tw-exit-rotate":"0"},to:l}:null}function N(){const n=[".udx-view",".udx-view-x",".udx-view-y",".udx-view-inline",".udx-view-block","[data-udx-view]"].map(t=>`${t}.animate-in, ${t}.animate-out`).join(", ");return Array.from(document.querySelectorAll(n))}function $(n={}){if(m)return g||(()=>{});if(typeof window>"u")return()=>{};if(C()||F())return m=!0,()=>{};m=!0;const t=n.once??!0,e=new WeakSet;let r=null;const a=()=>{const v=N(),h=window.innerHeight||0;for(const c of v){const u=c.getBoundingClientRect(),S=Math.min(u.bottom,h)-Math.max(u.top,0),M=Math.max(0,Math.min(S,u.height)),b=u.height>0?M/u.height:0,{start:f,end:x}=T(c);let s=(b-f)/(x-f);s=Math.max(0,Math.min(1,s)),t&&e.has(c)&&s<1&&(s=1);const d=L(c);if(!d)continue;const{from:y,to:w}=d;k(c,y,w,s),s>=1&&t&&e.add(c)}},o=()=>{r==null&&(r=window.requestAnimationFrame(()=>{r=null,a()}))};a(),window.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o);const l=new MutationObserver(()=>{o()});return l.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),g=()=>{window.removeEventListener("scroll",o),window.removeEventListener("resize",o),r!=null&&cancelAnimationFrame(r),l.disconnect(),m=!1,g=null},g}exports.initScrollViewFallback=$;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.6.4",
+  "version": "2.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,6 +20,8 @@
     "react-dom": ">19.0.0"
   },
   "dependencies": {
+    "pathe": "^2.0.3",
+    "jiti": "^2.5.1",
     "throttle-debounce": "^5.0.2",
     "clsx": "^1.1.1",
     "react-textarea-autosize": "^8.5.9",
@@ -34,8 +36,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/tailwind": "1.7.3",
-    "@udixio/theme": "1.3.1"
+    "@udixio/theme": "2.0.0",
+    "@udixio/tailwind": "2.1.0"
   },
   "repository": {
     "type": "git",

package/src/lib/config/config.interface.ts

@@ -0,0 +1,9 @@
+import {
+  ConfigInterface as ConfigTheme,
+  FontPluginOptions,
+} from '@udixio/theme';
+import { TailwindPluginOptions } from '@udixio/tailwind';
+
+export type ConfigInterface = Omit<ConfigTheme, 'plugins' | 'isDark'> &
+  TailwindPluginOptions &
+  FontPluginOptions;

package/src/lib/config/define-config.ts

@@ -0,0 +1,16 @@
+import { ConfigInterface } from './config.interface';
+import {
+  ConfigInterface as ConfigTheme,
+  defineConfig as defineConfigTheme,
+  FontPlugin,
+  Variants,
+} from '@udixio/theme';
+import { TailwindPlugin } from '@udixio/tailwind';
+
+export function defineConfig(configObject: ConfigInterface): ConfigTheme {
+  return defineConfigTheme({
+    variant: Variants.Fidelity,
+    ...configObject,
+    plugins: [new FontPlugin(configObject), new TailwindPlugin(configObject)],
+  });
+}

package/src/lib/config/index.ts

@@ -0,0 +1,2 @@
+export * from './config.interface';
+export * from './define-config';

package/src/lib/effects/AnimateOnScroll.ts

@@ -0,0 +1,267 @@
+// Simple script initializer (no React component)
+
+/**
+ * AnimateOnScroll
+ *
+ * Manages triggers for animations:
+ * - ScrollDriven animations: use native CSS if supported; otherwise import JS fallback per element set.
+ * - Other entry/exit animations: handled via IntersectionObserver in JS.
+ */
+
+
+function supportsScrollTimeline(): boolean {
+  if (typeof window === `undefined`) return false;
+  try {
+    // @ts-ignore - CSS may not exist in TS lib
+    if (window.CSS && typeof window.CSS.supports === `function`) {
+      // @ts-ignore
+      return (
+        CSS.supports(`animation-timeline: view()`) ||
+        CSS.supports(`animation-timeline: scroll()`) ||
+        // some older implementations used view-timeline-name
+        CSS.supports(`view-timeline-name: --a`)
+      );
+    }
+  } catch {}
+  return false;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === `undefined` || !(`matchMedia` in window)) return false;
+  return window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+
+function isScrollDrivenCandidate(el: Element): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const cls = el.classList;
+
+  return Array.from(cls).some(
+    (className) =>
+      className.startsWith('anim-') && className.includes('scroll'),
+  );
+}
+function isJsObserverCandidate(el: Element): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const cls = el.classList;
+  const hasAnimation = Array.from(cls).some((className) =>
+    className.startsWith('anim-'),
+  );
+  if (!hasAnimation) return false;
+  // Not scroll-driven
+  return !isScrollDrivenCandidate(el);
+}
+
+function hydrateElement(el: HTMLElement, prefix: string): void {
+  if (!isScrollDrivenCandidate(el)) return;
+
+  // Map data-anim-scroll to correct axis class if provided
+  if (el.hasAttribute(`data-${prefix}-scroll`)) {
+    const raw = (el.getAttribute(`data-${prefix}-scroll`) || ``)
+      .trim()
+      .toLowerCase();
+    const axis =
+      raw === `x` || raw === `inline`
+        ? `inline`
+        : raw === `y` || raw === `block`
+          ? `block`
+          : `auto`;
+    const hasAny =
+      el.classList.contains(`${prefix}-timeline`) ||
+      el.classList.contains(`${prefix}-timeline-inline`) ||
+      el.classList.contains(`${prefix}-timeline-block`) ||
+      el.classList.contains(`${prefix}-timeline-x`) ||
+      el.classList.contains(`${prefix}-timeline-y`);
+    if (!hasAny) {
+      if (axis === `inline`) el.classList.add(`${prefix}-timeline-inline`);
+      else if (axis === `block`) el.classList.add(`${prefix}-timeline-block`);
+      else el.classList.add(`${prefix}-scroll`);
+    }
+  }
+
+  // Offsets via data-anim-start / data-anim-end (accepts tokens like "entry 20%", "cover 50%", etc.)
+  const start = el.getAttribute(`data-${prefix}-start`);
+  if (start) el.style.setProperty(`--${prefix}-range-start`, start);
+  const end = el.getAttribute(`data-${prefix}-end`);
+  if (end) el.style.setProperty(`--${prefix}-range-end`, end);
+
+  // Ensure play state is running unless explicitly paused
+  const explicitlyPaused =
+    el.hasAttribute(`data-${prefix}-paused`) ||
+    el.classList.contains(`${prefix}-paused`);
+  const alreadyRunning =
+    el.hasAttribute(`data-${prefix}-run`) ||
+    el.classList.contains(`${prefix}-run`);
+  if (!explicitlyPaused && !alreadyRunning) {
+    el.setAttribute(`data-${prefix}-run`, ``);
+  }
+}
+
+function queryScrollDrivenCandidates(
+  root: ParentNode = document,
+  prefix: string,
+): HTMLElement[] {
+  // Select any elements that have an animation class and are marked as scroll-driven
+  const animated = Array.from(
+    root.querySelectorAll<HTMLElement>(`[class*="${prefix}-"]`),
+  );
+  return animated.filter((el) => isScrollDrivenCandidate(el));
+}
+
+function queryJsObserverCandidates(
+  root: ParentNode = document,
+  prefix: string,
+): HTMLElement[] {
+  // All anim-in/out that are NOT scroll-driven
+  const animated = Array.from(
+    root.querySelectorAll<HTMLElement>(`[class*="anim-"]`),
+  );
+
+  return animated.filter((el) => !isScrollDrivenCandidate(el));
+}
+
+export type AnimateOnScrollOptions = {
+  prefix?: string;
+  once?: boolean;
+};
+
+export function initAnimateOnScroll(options: AnimateOnScrollOptions = {}): () => void {
+  const { prefix = 'anim', once = true } = options;
+
+  if (prefersReducedMotion()) {
+    return () => {};
+  }
+
+  const cssSupported = supportsScrollTimeline();
+
+  // Setup JS observers for non-scroll-driven animations
+  const observed = new WeakSet<Element>();
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        const el = entry.target as HTMLElement;
+
+        if (!isJsObserverCandidate(el)) continue;
+
+        const cls = el.classList;
+        const isOut = cls.contains(`${prefix}-out`);
+        const isIn = !isOut;
+
+        if (isIn && entry.isIntersecting) {
+          el.setAttribute(`data-${prefix}-in-run`, ``);
+          if (once) io.unobserve(el);
+        } else if (isOut && !entry.isIntersecting) {
+          el.setAttribute(`data-${prefix}-out-run`, ``);
+          if (once) io.unobserve(el);
+        } else {
+          if (!once) {
+            const currentAnimationName = el.style.animationName;
+            el.style.animationName = 'none';
+            el.removeAttribute(`data-${prefix}-in-run`);
+            el.removeAttribute(`data-${prefix}-out-run`);
+            void el.offsetWidth; // reflow
+            el.style.animationName = currentAnimationName;
+          }
+        }
+      }
+    },
+    { threshold: [0, 0.2] },
+  );
+
+  const observeJsCandidates = (root?: ParentNode) => {
+    const candidates = queryJsObserverCandidates(root || document, prefix);
+    for (const el of candidates) {
+      if (observed.has(el)) continue;
+      observed.add(el);
+      io.observe(el);
+    }
+  };
+
+  // Initial observe
+  observeJsCandidates();
+
+  // Scroll-driven branch per support state
+  let cleanupScrollDriven: void | (() => void);
+  let mo: MutationObserver | null = null;
+  let rafId: number | null = null;
+
+  if (cssSupported) {
+    const schedule = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const els = queryScrollDrivenCandidates(undefined, prefix);
+        for (const el of els) hydrateElement(el, prefix);
+      });
+    };
+
+    // Initial hydration
+    schedule();
+
+    mo = new MutationObserver((muts) => {
+      for (const m of muts) {
+        if (m.type === `attributes`) {
+          const t = m.target;
+          if (t instanceof HTMLElement) {
+            hydrateElement(t as HTMLElement, prefix);
+            if (isJsObserverCandidate(t)) {
+              if (!observed.has(t)) {
+                observed.add(t);
+                io.observe(t);
+              }
+            }
+          }
+        } else if (m.type === `childList`) {
+          if (m.addedNodes && m.addedNodes.length) {
+            for (const node of Array.from(m.addedNodes)) {
+              if (node instanceof HTMLElement) {
+                const sds = queryScrollDrivenCandidates(node, prefix);
+                for (const el of sds) hydrateElement(el, prefix);
+                observeJsCandidates(node);
+              }
+            }
+          }
+        }
+      }
+    });
+
+    mo.observe(document.documentElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: [
+        `class`,
+        `data-${prefix}-scroll`,
+        `data-${prefix}-start`,
+        `data-${prefix}-end`,
+        `data-${prefix}-paused`,
+        `data-${prefix}-run`,
+      ],
+    });
+
+    cleanupScrollDriven = () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      if (mo) mo.disconnect();
+    };
+  } else {
+    let stop: void | (() => void);
+    const existing = queryScrollDrivenCandidates(undefined, prefix);
+    if (existing.length > 0) {
+      import(`./scrollDriven`).then((m) => {
+        stop = m.initScrollViewFallback({ once });
+      });
+    }
+    cleanupScrollDriven = () => {
+      if (typeof stop === `function`) (stop as () => void)();
+    };
+  }
+
+  // Public cleanup
+  return () => {
+    if (cleanupScrollDriven) cleanupScrollDriven();
+    io.disconnect();
+  };
+}
+
+// Backward-compatible alias name (non-React):
+export const AnimateOnScrollInit = initAnimateOnScroll;