@niibase/uniwind 1.4.1 → 1.5.0

package/dist/common/common/consts.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNIWIND_THEME_VARIABLES = exports.UNIWIND_PLATFORM_VARIABLES = exports.Platform = void 0;
+var Platform = exports.Platform = /* @__PURE__ */(Platform2 => {
+  Platform2["Android"] = "android";
+  Platform2["iOS"] = "ios";
+  Platform2["Web"] = "web";
+  Platform2["Native"] = "native";
+  Platform2["TV"] = "tv";
+  Platform2["AndroidTV"] = "android-tv";
+  Platform2["AppleTV"] = "apple-tv";
+  return Platform2;
+})(Platform || {});
+const UNIWIND_PLATFORM_VARIABLES = exports.UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
+const UNIWIND_THEME_VARIABLES = exports.UNIWIND_THEME_VARIABLES = "__uniwind-theme-";

package/dist/common/components/native/Pressable.js

@@ -11,17 +11,20 @@ var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Pressable = exports.Pressable = (0, _utils.copyComponentProperties)(_reactNative.Pressable, props => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const {
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.Pressable, props.className, props, {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   });
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, typeof props.style === "function" ? props.style({
-      pressed: isPressed
+      pressed: isPressed,
+      focused: isFocused
     }) : props.style],
     onPressIn: event => {
       setIsPressed(true);
@@ -30,6 +33,14 @@ const Pressable = exports.Pressable = (0, _utils.copyComponentProperties)(_react
     onPressOut: event => {
       setIsPressed(false);
       props.onPressOut?.(event);
+    },
+    onFocus: event => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsFocused(false);
+      props.onBlur?.(event);
     }
   });
 });

package/dist/common/components/native/TouchableHighlight.js

@@ -11,9 +11,11 @@ var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponentProperties)(_reactNative.TouchableHighlight, props => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const state = {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   };
   const {
     Component,
@@ -31,6 +33,14 @@ const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponent
     onPressOut: event => {
       setIsPressed(false);
       props.onPressOut?.(event);
+    },
+    onFocus: event => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsFocused(false);
+      props.onBlur?.(event);
     }
   });
 });

package/dist/common/components/native/TouchableOpacity.js

@@ -11,9 +11,11 @@ var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const TouchableOpacity = exports.TouchableOpacity = (0, _utils.copyComponentProperties)(_reactNative.TouchableOpacity, props => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const state = {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   };
   const {
     Component,
@@ -29,6 +31,14 @@ const TouchableOpacity = exports.TouchableOpacity = (0, _utils.copyComponentProp
     onPressOut: event => {
       setIsPressed(false);
       props.onPressOut?.(event);
+    },
+    onFocus: event => {
+      setIsFocused(true);
+      props.onFocus?.(event);
+    },
+    onBlur: event => {
+      setIsFocused(false);
+      props.onBlur?.(event);
     }
   });
 });

package/dist/common/core/native/store.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UniwindStore = void 0;
 var _reactNative = require("react-native");
+var _consts = require("../../common/consts");
 var _types = require("../../types");
 var _listener = require("../listener");
 var _nativeUtils = require("./native-utils");
@@ -46,7 +47,13 @@ class UniwindStoreBuilder {
       vars,
       keyframes
     } = generateStyleSheetCallback(this.runtime);
-    const platformVars = scopedVars[`__uniwind-platform-${_reactNative.Platform.OS}`];
+    const platform = this.getCurrentPlatform();
+    const commonPlatform = platform.includes("tv") ? _consts.Platform.TV : _consts.Platform.Native;
+    const commonPlatformVars = scopedVars[`${_consts.UNIWIND_PLATFORM_VARIABLES}${commonPlatform}`];
+    const platformVars = scopedVars[`${_consts.UNIWIND_PLATFORM_VARIABLES}${platform}`];
+    if (commonPlatformVars) {
+      Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars));
+    }
     if (platformVars) {
       Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars));
     }
@@ -54,7 +61,7 @@ class UniwindStoreBuilder {
     this.stylesheet = stylesheet;
     this.vars = Object.fromEntries(themes.map(theme => {
       const clonedVars = (0, _nativeUtils.cloneWithAccessors)(vars);
-      const themeVars = scopedVars[`__uniwind-theme-${theme}`];
+      const themeVars = scopedVars[`${_consts.UNIWIND_THEME_VARIABLES}${theme}`];
       if (themeVars) {
         Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars));
       }
@@ -217,6 +224,16 @@ class UniwindStoreBuilder {
     }
     return true;
   }
+  getCurrentPlatform() {
+    const platform = _reactNative.Platform.OS;
+    if (platform === "android") {
+      return _reactNative.Platform.isTV ? _consts.Platform.AndroidTV : _consts.Platform.Android;
+    }
+    if (platform === "ios") {
+      return _reactNative.Platform.isTV ? _consts.Platform.AppleTV : _consts.Platform.iOS;
+    }
+    return platform;
+  }
 }
 const UniwindStore = exports.UniwindStore = new UniwindStoreBuilder();
 _reactNative.Dimensions.addEventListener("change", ({

package/dist/common/css/variants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateCSSForVariants = void 0;
-const variants = ["ios", "android", "web", "native"];
+const variants = ["ios", "android", "web", "native", "tv", "android-tv", "apple-tv"];
 const generateCSSForVariants = () => {
   let css = "";
   variants.forEach(variant => {

package/dist/metro/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
+const consts = require('../shared/uniwind.B5q8hBGv.cjs');
 const FileStoreBase = require('metro-cache/private/stores/FileStore');
 const os = require('os');
 const path = require('path');
 const node_path = require('node:path');
 const common = require('../shared/uniwind.nl8746mK.cjs');
-const types = require('../shared/uniwind.BZIuaszw.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -172,7 +172,7 @@ const withUniwindConfig = (config, uniwindConfig) => {
       ),
       resolveRequest: (context, moduleName, platform) => {
         const resolver = config.resolver?.resolveRequest ?? context.resolveRequest;
-        const platformResolver = (platform === types.Platform.Web ? webResolver : nativeResolver)(uniwindConfig.extraComponents ?? {});
+        const platformResolver = (platform === consts.Platform.Web ? webResolver : nativeResolver)(uniwindConfig.extraComponents ?? {});
         const resolved = platformResolver({
           context,
           moduleName,

package/dist/metro/index.d.ts

@@ -10,6 +10,7 @@ type UniwindConfig = {
     dtsFile?: string
     polyfills?: Polyfills
     debug?: boolean
+    isTV?: boolean
 }
 
 export declare function withUniwindConfig(config: MetroConfig, options: UniwindConfig): MetroConfig

package/dist/metro/index.mjs

@@ -1,9 +1,9 @@
+import { P as Platform } from '../shared/uniwind.JSWK3vHl.mjs';
 import FileStoreBase from 'metro-cache/private/stores/FileStore';
 import os from 'os';
 import path from 'path';
 import { join, dirname, sep, basename } from 'node:path';
 import { n as name, u as uniq } from '../shared/uniwind.F-0-Rr--.mjs';
-import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
 
 class FileStore extends FileStoreBase {
   async set(key, value) {

package/dist/metro/metro-transformer.cjs

@@ -3,11 +3,11 @@
 const fs = require('fs');
 const path = require('path');
 const common = require('../shared/uniwind.nl8746mK.cjs');
+const consts = require('../shared/uniwind.B5q8hBGv.cjs');
 const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
 const lightningcss = require('lightningcss');
-const types = require('../shared/uniwind.BZIuaszw.cjs');
-const stringifyThemes = require('../shared/uniwind.D7C2Zt-r.cjs');
+const stringifyThemes = require('../shared/uniwind.DTMo4epG.cjs');
 const culori = require('culori');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -163,8 +163,12 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         ...rest
       } = style;
       const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
-      if (platform && platform !== types.Platform.Native && platform !== currentPlatform) {
-        return null;
+      if (platform) {
+        const isTV = currentPlatform === consts.Platform.AndroidTV || currentPlatform === consts.Platform.AppleTV;
+        const commonPlatform = isTV ? consts.Platform.TV : consts.Platform.Native;
+        if (platform !== commonPlatform && platform !== currentPlatform) {
+          return null;
+        }
       }
       if (entries.length === 0) {
         return null;
@@ -1190,7 +1194,14 @@ class MQ {
     const mq = this.getInitialMediaQueryResolver();
     for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
-      if ([types.Platform.Android, types.Platform.iOS, types.Platform.Native].includes(mediaType)) {
+      if ([
+        consts.Platform.Android,
+        consts.Platform.iOS,
+        consts.Platform.Native,
+        consts.Platform.AndroidTV,
+        consts.Platform.AppleTV,
+        consts.Platform.TV
+      ].includes(mediaType)) {
         mq.platform = mediaType;
         continue;
       }
@@ -1425,7 +1436,17 @@ const cssToRNMap = {
   },
   fontVariantNumeric: (value) => ({
     fontVariant: value
-  })
+  }),
+  display: (value) => {
+    if (value === '"box"') {
+      return {
+        display: '"flex"'
+      };
+    }
+    return {
+      display: value
+    };
+  }
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
@@ -1689,7 +1710,7 @@ class ProcessorBuilder {
         return this.stylesheets[this.declarationConfig.className]?.at(-1);
       }
       if (mq.platform !== null) {
-        const platformKey = `__uniwind-platform-${mq.platform}`;
+        const platformKey = `${consts.UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
         this.scopedVars[platformKey] ??= {};
         return this.scopedVars[platformKey];
       }
@@ -1701,7 +1722,7 @@ class ProcessorBuilder {
       if (this.declarationConfig.theme === null) {
         return this.vars;
       }
-      const themeKey = `__uniwind-theme-${this.declarationConfig.theme}`;
+      const themeKey = `${consts.UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
       this.scopedVars[themeKey] ??= {};
       return this.scopedVars[themeKey];
     })();
@@ -1953,7 +1974,7 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
     ]
   });
   const tailwindCSS = compiler.build(candidates ?? scanner.scan());
-  if (platform === types.Platform.Web) {
+  if (platform === consts.Platform.Web) {
     return lightningcss.transform({
       code: Buffer.from(tailwindCSS),
       filename: "uniwind.css",
@@ -2035,6 +2056,18 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   if (!isCss) {
     return worker.transform(config, projectRoot, filePath, data, options);
   }
+  const getPlatform = () => {
+    if (!config.uniwind.isTV) {
+      return options.platform;
+    }
+    if (options.platform === consts.Platform.Android) {
+      return consts.Platform.AndroidTV;
+    }
+    if (options.platform === consts.Platform.iOS) {
+      return consts.Platform.AppleTV;
+    }
+    throw new Error(`Platform ${options.platform} not supported`);
+  };
   const cssPath = path__default.join(process.cwd(), config.uniwind.cssEntryFile);
   const injectedThemesCode = await injectThemes({
     input: cssPath,
@@ -2042,7 +2075,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     dtsPath: config.uniwind.dtsFile
   });
   const css = fs__default.readFileSync(filePath, "utf-8");
-  const platform = options.platform;
+  const platform = getPlatform();
   const virtualCode = await compileVirtual({
     css,
     platform,
@@ -2051,7 +2084,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     cssPath,
     debug: config.uniwind.debug
   });
-  const isWeb = platform === types.Platform.Web;
+  const isWeb = platform === consts.Platform.Web;
   data = Buffer.from(
     isWeb ? virtualCode : [
       `import { Uniwind } from '${common.name}';`,

package/dist/metro/metro-transformer.mjs

@@ -1,11 +1,11 @@
 import fs from 'fs';
 import path from 'path';
 import { p as pipe, r as roundToPrecision, i as isNumber, a as isValidJSValue, s as smartSplit, b as addMissingSpaces, t as toCamelCase, c as isDefined, d as deepEqual, e as shouldBeSerialized, f as removeKeys, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
+import { P as Platform, U as UNIWIND_PLATFORM_VARIABLES, a as UNIWIND_THEME_VARIABLES } from '../shared/uniwind.JSWK3vHl.mjs';
 import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
 import { transform as transform$1 } from 'lightningcss';
-import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
-import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.B_j3NcHy.mjs';
+import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.BWb5KNML.mjs';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 
 const parseStringValue = (value) => {
@@ -156,8 +156,12 @@ const addMetaToStylesTemplate = (Processor, currentPlatform) => {
         ...rest
       } = style;
       const entries = Object.entries(rest).flatMap(([property, value]) => Processor.RN.cssToRN(property, value)).map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`]);
-      if (platform && platform !== Platform.Native && platform !== currentPlatform) {
-        return null;
+      if (platform) {
+        const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV;
+        const commonPlatform = isTV ? Platform.TV : Platform.Native;
+        if (platform !== commonPlatform && platform !== currentPlatform) {
+          return null;
+        }
       }
       if (entries.length === 0) {
         return null;
@@ -1183,7 +1187,14 @@ class MQ {
     const mq = this.getInitialMediaQueryResolver();
     for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
-      if ([Platform.Android, Platform.iOS, Platform.Native].includes(mediaType)) {
+      if ([
+        Platform.Android,
+        Platform.iOS,
+        Platform.Native,
+        Platform.AndroidTV,
+        Platform.AppleTV,
+        Platform.TV
+      ].includes(mediaType)) {
         mq.platform = mediaType;
         continue;
       }
@@ -1418,7 +1429,17 @@ const cssToRNMap = {
   },
   fontVariantNumeric: (value) => ({
     fontVariant: value
-  })
+  }),
+  display: (value) => {
+    if (value === '"box"') {
+      return {
+        display: '"flex"'
+      };
+    }
+    return {
+      display: value
+    };
+  }
 };
 const BORDER_WIDTH_KEYS = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"];
 const BORDER_COLOR_KEYS = ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"];
@@ -1682,7 +1703,7 @@ class ProcessorBuilder {
         return this.stylesheets[this.declarationConfig.className]?.at(-1);
       }
       if (mq.platform !== null) {
-        const platformKey = `__uniwind-platform-${mq.platform}`;
+        const platformKey = `${UNIWIND_PLATFORM_VARIABLES}${mq.platform}`;
         this.scopedVars[platformKey] ??= {};
         return this.scopedVars[platformKey];
       }
@@ -1694,7 +1715,7 @@ class ProcessorBuilder {
       if (this.declarationConfig.theme === null) {
         return this.vars;
       }
-      const themeKey = `__uniwind-theme-${this.declarationConfig.theme}`;
+      const themeKey = `${UNIWIND_THEME_VARIABLES}${this.declarationConfig.theme}`;
       this.scopedVars[themeKey] ??= {};
       return this.scopedVars[themeKey];
     })();
@@ -2028,6 +2049,18 @@ const transform = async (config, projectRoot, filePath, data, options) => {
   if (!isCss) {
     return worker.transform(config, projectRoot, filePath, data, options);
   }
+  const getPlatform = () => {
+    if (!config.uniwind.isTV) {
+      return options.platform;
+    }
+    if (options.platform === Platform.Android) {
+      return Platform.AndroidTV;
+    }
+    if (options.platform === Platform.iOS) {
+      return Platform.AppleTV;
+    }
+    throw new Error(`Platform ${options.platform} not supported`);
+  };
   const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile);
   const injectedThemesCode = await injectThemes({
     input: cssPath,
@@ -2035,7 +2068,7 @@ const transform = async (config, projectRoot, filePath, data, options) => {
     dtsPath: config.uniwind.dtsFile
   });
   const css = fs.readFileSync(filePath, "utf-8");
-  const platform = options.platform;
+  const platform = getPlatform();
   const virtualCode = await compileVirtual({
     css,
     platform,

package/dist/module/common/consts.d.ts

@@ -0,0 +1,11 @@
+export declare const enum Platform {
+    Android = "android",
+    iOS = "ios",
+    Web = "web",
+    Native = "native",
+    TV = "tv",
+    AndroidTV = "android-tv",
+    AppleTV = "apple-tv"
+}
+export declare const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
+export declare const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";

package/dist/module/common/consts.js

@@ -0,0 +1,12 @@
+export var Platform = /* @__PURE__ */ ((Platform2) => {
+  Platform2["Android"] = "android";
+  Platform2["iOS"] = "ios";
+  Platform2["Web"] = "web";
+  Platform2["Native"] = "native";
+  Platform2["TV"] = "tv";
+  Platform2["AndroidTV"] = "android-tv";
+  Platform2["AppleTV"] = "apple-tv";
+  return Platform2;
+})(Platform || {});
+export const UNIWIND_PLATFORM_VARIABLES = "__uniwind-platform-";
+export const UNIWIND_THEME_VARIABLES = "__uniwind-theme-";

package/dist/module/components/native/Pressable.d.ts

@@ -1,3 +1,8 @@
 import { PressableProps } from 'react-native';
+declare module 'react-native' {
+    interface PressableStateCallbackType {
+        focused?: boolean;
+    }
+}
 export declare const Pressable: import("react").ForwardRefExoticComponent<PressableProps & import("react").RefAttributes<import("react-native").View>>;
 export default Pressable;

package/dist/module/components/native/Pressable.js

@@ -5,9 +5,11 @@ import { copyComponentProperties } from "../utils.js";
 import { useStyle } from "./useStyle.js";
 export const Pressable = copyComponentProperties(RNPressable, (props) => {
   const [isPressed, setIsPressed] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const { Component, style } = useStyle(RNPressable, props.className, props, {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   });
   return /* @__PURE__ */ jsx(
     Component,
@@ -15,7 +17,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props) => {
       ...props,
       style: [
         style,
-        typeof props.style === "function" ? props.style({ pressed: isPressed }) : props.style
+        typeof props.style === "function" ? props.style({ pressed: isPressed, focused: isFocused }) : props.style
       ],
       onPressIn: (event) => {
         setIsPressed(true);
@@ -24,6 +26,14 @@ export const Pressable = copyComponentProperties(RNPressable, (props) => {
       onPressOut: (event) => {
         setIsPressed(false);
         props.onPressOut?.(event);
+      },
+      onFocus: (event) => {
+        setIsFocused(true);
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        props.onBlur?.(event);
       }
     }
   );

package/dist/module/components/native/TouchableHighlight.js

@@ -5,9 +5,11 @@ import { copyComponentProperties } from "../utils.js";
 import { useStyle } from "./useStyle.js";
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props) => {
   const [isPressed, setIsPressed] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const state = {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   };
   const { Component, style } = useStyle(RNTouchableHighlight, props.className, props, state);
   const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor;
@@ -24,6 +26,14 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
       onPressOut: (event) => {
         setIsPressed(false);
         props.onPressOut?.(event);
+      },
+      onFocus: (event) => {
+        setIsFocused(true);
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        props.onBlur?.(event);
       }
     }
   );

package/dist/module/components/native/TouchableOpacity.js

@@ -5,9 +5,11 @@ import { copyComponentProperties } from "../utils.js";
 import { useStyle } from "./useStyle.js";
 export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (props) => {
   const [isPressed, setIsPressed] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const state = {
     isDisabled: Boolean(props.disabled),
-    isPressed
+    isPressed,
+    isFocused
   };
   const { Component, style } = useStyle(RNTouchableOpacity, props.className, props, state);
   return /* @__PURE__ */ jsx(
@@ -22,6 +24,14 @@ export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (pro
       onPressOut: (event) => {
         setIsPressed(false);
         props.onPressOut?.(event);
+      },
+      onFocus: (event) => {
+        setIsFocused(true);
+        props.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        props.onBlur?.(event);
       }
     }
   );

package/dist/module/core/native/parsers/gradient.d.ts

@@ -1,7 +1,7 @@
 export declare const resolveGradient: (value: string) => {
     colorStops: {
         color: string;
-        positions: string[][] | undefined;
+        positions: string[] | undefined;
     }[];
     type: "linear-gradient";
     direction: string | undefined;

package/dist/module/core/native/store.d.ts

@@ -15,6 +15,7 @@ declare class UniwindStoreBuilder {
     reinit: (generateStyleSheetCallback: GenerateStyleSheetsCallback, themes: Array<string>) => void;
     private resolveStyles;
     private validateDataAttributes;
+    private getCurrentPlatform;
 }
 export declare const UniwindStore: UniwindStoreBuilder;
 export {};

package/dist/module/core/native/store.js

@@ -1,4 +1,5 @@
 import { Dimensions, Platform } from "react-native";
+import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from "../../common/consts.js";
 import { Orientation, StyleDependency } from "../../types.js";
 import { UniwindListener } from "../listener.js";
 import { cloneWithAccessors } from "./native-utils.js";
@@ -40,7 +41,13 @@ class UniwindStoreBuilder {
   }
   reinit = (generateStyleSheetCallback, themes) => {
     const { scopedVars, stylesheet, vars, keyframes } = generateStyleSheetCallback(this.runtime);
-    const platformVars = scopedVars[`__uniwind-platform-${Platform.OS}`];
+    const platform = this.getCurrentPlatform();
+    const commonPlatform = platform.includes("tv") ? UniwindPlatform.TV : UniwindPlatform.Native;
+    const commonPlatformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${commonPlatform}`];
+    const platformVars = scopedVars[`${UNIWIND_PLATFORM_VARIABLES}${platform}`];
+    if (commonPlatformVars) {
+      Object.defineProperties(vars, Object.getOwnPropertyDescriptors(commonPlatformVars));
+    }
     if (platformVars) {
       Object.defineProperties(vars, Object.getOwnPropertyDescriptors(platformVars));
     }
@@ -48,7 +55,7 @@ class UniwindStoreBuilder {
     this.stylesheet = stylesheet;
     this.vars = Object.fromEntries(themes.map((theme) => {
       const clonedVars = cloneWithAccessors(vars);
-      const themeVars = scopedVars[`__uniwind-theme-${theme}`];
+      const themeVars = scopedVars[`${UNIWIND_THEME_VARIABLES}${theme}`];
       if (themeVars) {
         Object.defineProperties(clonedVars, Object.getOwnPropertyDescriptors(themeVars));
       }
@@ -209,6 +216,16 @@ class UniwindStoreBuilder {
     }
     return true;
   }
+  getCurrentPlatform() {
+    const platform = Platform.OS;
+    if (platform === "android") {
+      return Platform.isTV ? UniwindPlatform.AndroidTV : UniwindPlatform.Android;
+    }
+    if (platform === "ios") {
+      return Platform.isTV ? UniwindPlatform.AppleTV : UniwindPlatform.iOS;
+    }
+    return platform;
+  }
 }
 export const UniwindStore = new UniwindStoreBuilder();
 Dimensions.addEventListener("change", ({ window }) => {

package/dist/module/css/variants.js

@@ -1,4 +1,4 @@
-const variants = ["ios", "android", "web", "native"];
+const variants = ["ios", "android", "web", "native", "tv", "android-tv", "apple-tv"];
 export const generateCSSForVariants = () => {
   let css = "";
   variants.forEach((variant) => {