@niibase/uniwind 1.0.0 → 1.0.10

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UniwindRuntime = void 0;
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _types = require("../../types");
 var _nativeUtils = require("./native-utils");
 const window = _reactNative.Dimensions.get("window");
@@ -20,7 +21,7 @@ const UniwindRuntime = exports.UniwindRuntime = {
   fontScale: value => value * _reactNative.PixelRatio.getFontScale(),
   hairlineWidth: _reactNative.StyleSheet.hairlineWidth,
   rtl: _reactNative.I18nManager.isRTL,
-  insets: {
+  insets: _reactNativeSafeAreaContext.initialWindowMetrics?.insets ?? {
     top: 0,
     left: 0,
     bottom: 0,

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

@@ -15,6 +15,7 @@ class UniwindStoreBuilder {
   vars = {};
   runtimeThemeVariables = /* @__PURE__ */new Map();
   stylesheet = {};
+  varsWithMediaQueries = [];
   cache = /* @__PURE__ */new Map();
   generateStyleSheetCallbackResult = null;
   getStyles(className, state) {
@@ -43,11 +44,15 @@ class UniwindStoreBuilder {
     const {
       scopedVars,
       stylesheet,
-      vars
+      vars,
+      varsWithMediaQueries
     } = config;
+    this.vars = varsWithMediaQueries.length > 0 ? {
+      ...vars
+    } : vars;
+    this.varsWithMediaQueries = varsWithMediaQueries;
     this.generateStyleSheetCallbackResult = config;
     this.stylesheet = stylesheet;
-    this.vars = vars;
     const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`];
     const platformVars = scopedVars[`__uniwind-platform-${_reactNative.Platform.OS}`];
     const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName);
@@ -64,11 +69,36 @@ class UniwindStoreBuilder {
       _listener.UniwindListener.notifyAll();
     }
   };
+  resolveMediaQueryVars(dependencies) {
+    for (const [varName, mqVariants] of this.varsWithMediaQueries) {
+      let bestMatch = null;
+      for (const variant of mqVariants) {
+        if (variant.orientation !== null) dependencies.add(_types.StyleDependency.Orientation);
+        if (variant.maxWidth !== null || variant.minWidth !== null) dependencies.add(_types.StyleDependency.Dimensions);
+        if (variant.colorScheme !== null) {
+          dependencies.add(_types.StyleDependency.ColorScheme);
+          dependencies.add(_types.StyleDependency.Theme);
+        }
+        if (variant.minWidth !== null && variant.minWidth > this.runtime.screen.width || variant.maxWidth !== null && variant.maxWidth !== Number.MAX_VALUE && variant.maxWidth < this.runtime.screen.width || variant.orientation !== null && this.runtime.orientation !== variant.orientation || variant.colorScheme !== null && this.runtime.currentThemeName !== variant.colorScheme) {
+          continue;
+        }
+        if (bestMatch === null || (variant.minWidth ?? 0) > (bestMatch.minWidth ?? 0)) bestMatch = variant;
+      }
+      if (bestMatch !== null) {
+        Object.defineProperty(this.vars, varName, {
+          configurable: true,
+          enumerable: true,
+          get: () => bestMatch.value
+        });
+      }
+    }
+    return this.vars;
+  }
   resolveStyles(classNames, state) {
     const result = {};
-    let vars = this.vars;
     const dependencies = /* @__PURE__ */new Set();
     const bestBreakpoints = /* @__PURE__ */new Map();
+    let vars = this.resolveMediaQueryVars(dependencies);
     for (const className of classNames.split(" ")) {
       if (!(className in this.stylesheet)) {
         continue;

package/dist/metro/index.cjs

@@ -71,7 +71,7 @@ const SUPPORTED_COMPONENTS = [
   "View",
   "VirtualizedList"
 ];
-const nativeResolver = ({
+const nativeResolver = (extraComponents) => ({
   context,
   moduleName,
   platform,
@@ -88,6 +88,12 @@ const nativeResolver = ({
   if (moduleName === "react-native") {
     return resolver(context, `${common.name}/components`, platform);
   }
+  if (moduleName === "react-native-gesture-handler") {
+    return resolver(context, `${common.name}/components/native/react-native-gesture-handler`, platform);
+  }
+  if (moduleName === "react-native-svg") {
+    return resolver(context, `${common.name}/components/native/react-native-svg`, platform);
+  }
   if (resolution.filePath.includes(`${node_path.sep}react-native${node_path.sep}Libraries${node_path.sep}`)) {
     const filename = node_path.basename(resolution.filePath.split(node_path.sep).at(-1) ?? "");
     const module = filename.split(".").at(0);
@@ -95,9 +101,13 @@ const nativeResolver = ({
       return resolver(context, `${common.name}/components/${module}`, platform);
     }
   }
+  if (moduleName in extraComponents) {
+    const componentPath = extraComponents[moduleName];
+    return resolver(context, componentPath, platform);
+  }
   return resolution;
 };
-const webResolver = ({
+const webResolver = (extraComponents) => ({
   context,
   moduleName,
   platform,
@@ -107,6 +117,10 @@ const webResolver = ({
   if (isFromThisModule(context.originModulePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${node_path.sep}react-native-web${node_path.sep}`)) {
     return resolution;
   }
+  if (moduleName in extraComponents) {
+    const componentPath = extraComponents[moduleName];
+    return resolver(context, componentPath, platform);
+  }
   const segments = resolution.filePath.split(node_path.sep);
   const isIndex = segments.at(-1)?.startsWith("index.");
   const module = segments.at(-2);
@@ -150,7 +164,7 @@ const withUniwindConfig = (config, uniwindConfig) => {
       ),
       resolveRequest: (context, moduleName, platform) => {
         const resolver = config.resolver?.resolveRequest ?? context.resolveRequest;
-        const platformResolver = platform === types.Platform.Web ? webResolver : nativeResolver;
+        const platformResolver = (platform === types.Platform.Web ? webResolver : nativeResolver)(uniwindConfig.extraComponents ?? {});
         const resolved = platformResolver({
           context,
           moduleName,

package/dist/metro/index.mjs

@@ -63,7 +63,7 @@ const SUPPORTED_COMPONENTS = [
   "View",
   "VirtualizedList"
 ];
-const nativeResolver = ({
+const nativeResolver = (extraComponents) => ({
   context,
   moduleName,
   platform,
@@ -80,6 +80,12 @@ const nativeResolver = ({
   if (moduleName === "react-native") {
     return resolver(context, `${name}/components`, platform);
   }
+  if (moduleName === "react-native-gesture-handler") {
+    return resolver(context, `${name}/components/native/react-native-gesture-handler`, platform);
+  }
+  if (moduleName === "react-native-svg") {
+    return resolver(context, `${name}/components/native/react-native-svg`, platform);
+  }
   if (resolution.filePath.includes(`${sep}react-native${sep}Libraries${sep}`)) {
     const filename = basename(resolution.filePath.split(sep).at(-1) ?? "");
     const module = filename.split(".").at(0);
@@ -87,9 +93,13 @@ const nativeResolver = ({
       return resolver(context, `${name}/components/${module}`, platform);
     }
   }
+  if (moduleName in extraComponents) {
+    const componentPath = extraComponents[moduleName];
+    return resolver(context, componentPath, platform);
+  }
   return resolution;
 };
-const webResolver = ({
+const webResolver = (extraComponents) => ({
   context,
   moduleName,
   platform,
@@ -99,6 +109,10 @@ const webResolver = ({
   if (isFromThisModule(context.originModulePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${sep}react-native-web${sep}`)) {
     return resolution;
   }
+  if (moduleName in extraComponents) {
+    const componentPath = extraComponents[moduleName];
+    return resolver(context, componentPath, platform);
+  }
   const segments = resolution.filePath.split(sep);
   const isIndex = segments.at(-1)?.startsWith("index.");
   const module = segments.at(-2);
@@ -142,7 +156,7 @@ const withUniwindConfig = (config, uniwindConfig) => {
       ),
       resolveRequest: (context, moduleName, platform) => {
         const resolver = config.resolver?.resolveRequest ?? context.resolveRequest;
-        const platformResolver = platform === Platform.Web ? webResolver : nativeResolver;
+        const platformResolver = (platform === Platform.Web ? webResolver : nativeResolver)(uniwindConfig.extraComponents ?? {});
         const resolved = platformResolver({
           context,
           moduleName,

package/dist/metro/metro-transformer.cjs

@@ -898,23 +898,29 @@ class MQ {
   }
   processMediaQueries(mediaQueries) {
     const mq = this.getInitialMediaQueryResolver();
-    mediaQueries.forEach((mediaQuery) => {
+    for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
       if ([types.Platform.Android, types.Platform.iOS, types.Platform.Native].includes(mediaType)) {
         mq.platform = mediaType;
-        return;
-      }
-      if (condition?.type !== "feature") {
-        return;
+        continue;
       }
+      if (condition) this.processCondition(condition, mq);
+    }
+    return mq;
+  }
+  processCondition(condition, mq) {
+    if (condition.type === "operation") {
+      condition.conditions.forEach((nestedCondition) => {
+        this.processCondition(nestedCondition, mq);
+      });
+    } else if (condition.type === "feature") {
       if (condition.value.type === "range") {
         this.processWidthMediaQuery(condition.value, mq);
       }
       if (condition.value.type === "plain") {
         this.processPlainMediaQuery(condition.value, mq);
       }
-    });
-    return mq;
+    }
   }
   processWidthMediaQuery(query, mq) {
     const { operator, value } = query;
@@ -1250,6 +1256,7 @@ class ProcessorBuilder {
   stylesheets = {};
   vars = {};
   scopedVars = {};
+  varsWithMediaQueries = {};
   CSS = new CSS(this);
   RN = new RN(this);
   Var = new Var(this);
@@ -1283,6 +1290,32 @@ class ProcessorBuilder {
       disabled: null
     };
   }
+  storeVarWithMediaQuery(varName, value, mq) {
+    if (!Array.isArray(this.varsWithMediaQueries[varName])) {
+      this.varsWithMediaQueries[varName] = [];
+    }
+    this.varsWithMediaQueries[varName].push({
+      value,
+      minWidth: mq.minWidth,
+      maxWidth: mq.maxWidth,
+      orientation: mq.orientation ? `'${mq.orientation}'` : null,
+      colorScheme: mq.colorScheme ? `'${mq.colorScheme}'` : null
+    });
+  }
+  hasMediaQuery(mq) {
+    return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null;
+  }
+  processDeclarationValue(mq, varName, processedValue, context) {
+    const { isVar, style, important } = context;
+    if (isVar && this.hasMediaQuery(mq)) {
+      this.storeVarWithMediaQuery(varName, processedValue, mq);
+    } else {
+      style[varName] = processedValue;
+    }
+    if (!isVar && important) {
+      style.importantProperties.push(varName);
+    }
+  }
   addDeclaration(declaration, important = false) {
     const isVar = this.declarationConfig.root || this.declarationConfig.className === null;
     const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries);
@@ -1312,24 +1345,22 @@ class ProcessorBuilder {
       style.disabled = this.declarationConfig.disabled;
       this.meta.className = this.declarationConfig.className;
     }
+    const context = { isVar, style, important };
     if (declaration.property === "unparsed") {
-      style[declaration.value.propertyId.property] = this.CSS.processValue(declaration.value.value);
-      if (!isVar && important) {
-        style.importantProperties.push(declaration.value.propertyId.property);
-      }
+      const varName2 = declaration.value.propertyId.property;
+      const processedValue2 = this.CSS.processValue(declaration.value.value);
+      this.processDeclarationValue(mq, varName2, processedValue2, context);
       return;
     }
     if (declaration.property === "custom") {
-      style[declaration.value.name] = this.CSS.processValue(declaration.value.value);
-      if (!isVar && important) {
-        style.importantProperties.push(declaration.value.name);
-      }
+      const varName2 = declaration.value.name;
+      const processedValue2 = this.CSS.processValue(declaration.value.value);
+      this.processDeclarationValue(mq, varName2, processedValue2, context);
       return;
     }
-    style[declaration.property] = this.CSS.processValue(declaration.value);
-    if (!isVar && important) {
-      style.importantProperties.push(declaration.property);
-    }
+    const varName = declaration.property;
+    const processedValue = this.CSS.processValue(declaration.value);
+    this.processDeclarationValue(mq, varName, processedValue, context);
   }
   parseRuleRec(rule) {
     if (this.declarationConfig.className !== null) {
@@ -1417,6 +1448,10 @@ class ProcessorBuilder {
         this.parseRuleRec(rule2);
         this.declarationConfig = this.getDeclarationConfig();
       });
+      this.declarationConfig.mediaQueries.splice(
+        this.declarationConfig.mediaQueries.length - mediaQueries.length,
+        mediaQueries.length
+      );
       return;
     }
     if (rule.type === "layer-block") {
@@ -1470,12 +1505,14 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
       serializeJSObject(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)
     ])
   );
+  const varsWithMediaQueries = Object.entries(Processor.varsWithMediaQueries).map(([key, value]) => `["${key}", ${serialize(value)}]`).join(",");
   const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
   const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
   return [
     "({",
     `scopedVars: ({ ${serializedScopedVars} }),`,
     `vars: ({ ${currentColorVar} ${vars} }),`,
+    `varsWithMediaQueries: ([ ${varsWithMediaQueries} ]),`,
     `stylesheet: ({ ${stylesheet} }),`,
     "})"
   ].join("");

package/dist/metro/metro-transformer.mjs

@@ -891,23 +891,29 @@ class MQ {
   }
   processMediaQueries(mediaQueries) {
     const mq = this.getInitialMediaQueryResolver();
-    mediaQueries.forEach((mediaQuery) => {
+    for (const mediaQuery of mediaQueries) {
       const { condition, mediaType } = mediaQuery;
       if ([Platform.Android, Platform.iOS, Platform.Native].includes(mediaType)) {
         mq.platform = mediaType;
-        return;
-      }
-      if (condition?.type !== "feature") {
-        return;
+        continue;
       }
+      if (condition) this.processCondition(condition, mq);
+    }
+    return mq;
+  }
+  processCondition(condition, mq) {
+    if (condition.type === "operation") {
+      condition.conditions.forEach((nestedCondition) => {
+        this.processCondition(nestedCondition, mq);
+      });
+    } else if (condition.type === "feature") {
       if (condition.value.type === "range") {
         this.processWidthMediaQuery(condition.value, mq);
       }
       if (condition.value.type === "plain") {
         this.processPlainMediaQuery(condition.value, mq);
       }
-    });
-    return mq;
+    }
   }
   processWidthMediaQuery(query, mq) {
     const { operator, value } = query;
@@ -1243,6 +1249,7 @@ class ProcessorBuilder {
   stylesheets = {};
   vars = {};
   scopedVars = {};
+  varsWithMediaQueries = {};
   CSS = new CSS(this);
   RN = new RN(this);
   Var = new Var(this);
@@ -1276,6 +1283,32 @@ class ProcessorBuilder {
       disabled: null
     };
   }
+  storeVarWithMediaQuery(varName, value, mq) {
+    if (!Array.isArray(this.varsWithMediaQueries[varName])) {
+      this.varsWithMediaQueries[varName] = [];
+    }
+    this.varsWithMediaQueries[varName].push({
+      value,
+      minWidth: mq.minWidth,
+      maxWidth: mq.maxWidth,
+      orientation: mq.orientation ? `'${mq.orientation}'` : null,
+      colorScheme: mq.colorScheme ? `'${mq.colorScheme}'` : null
+    });
+  }
+  hasMediaQuery(mq) {
+    return mq.minWidth !== 0 || mq.maxWidth !== Number.MAX_VALUE || mq.orientation !== null || mq.colorScheme !== null;
+  }
+  processDeclarationValue(mq, varName, processedValue, context) {
+    const { isVar, style, important } = context;
+    if (isVar && this.hasMediaQuery(mq)) {
+      this.storeVarWithMediaQuery(varName, processedValue, mq);
+    } else {
+      style[varName] = processedValue;
+    }
+    if (!isVar && important) {
+      style.importantProperties.push(varName);
+    }
+  }
   addDeclaration(declaration, important = false) {
     const isVar = this.declarationConfig.root || this.declarationConfig.className === null;
     const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries);
@@ -1305,24 +1338,22 @@ class ProcessorBuilder {
       style.disabled = this.declarationConfig.disabled;
       this.meta.className = this.declarationConfig.className;
     }
+    const context = { isVar, style, important };
     if (declaration.property === "unparsed") {
-      style[declaration.value.propertyId.property] = this.CSS.processValue(declaration.value.value);
-      if (!isVar && important) {
-        style.importantProperties.push(declaration.value.propertyId.property);
-      }
+      const varName2 = declaration.value.propertyId.property;
+      const processedValue2 = this.CSS.processValue(declaration.value.value);
+      this.processDeclarationValue(mq, varName2, processedValue2, context);
       return;
     }
     if (declaration.property === "custom") {
-      style[declaration.value.name] = this.CSS.processValue(declaration.value.value);
-      if (!isVar && important) {
-        style.importantProperties.push(declaration.value.name);
-      }
+      const varName2 = declaration.value.name;
+      const processedValue2 = this.CSS.processValue(declaration.value.value);
+      this.processDeclarationValue(mq, varName2, processedValue2, context);
       return;
     }
-    style[declaration.property] = this.CSS.processValue(declaration.value);
-    if (!isVar && important) {
-      style.importantProperties.push(declaration.property);
-    }
+    const varName = declaration.property;
+    const processedValue = this.CSS.processValue(declaration.value);
+    this.processDeclarationValue(mq, varName, processedValue, context);
   }
   parseRuleRec(rule) {
     if (this.declarationConfig.className !== null) {
@@ -1410,6 +1441,10 @@ class ProcessorBuilder {
         this.parseRuleRec(rule2);
         this.declarationConfig = this.getDeclarationConfig();
       });
+      this.declarationConfig.mediaQueries.splice(
+        this.declarationConfig.mediaQueries.length - mediaQueries.length,
+        mediaQueries.length
+      );
       return;
     }
     if (rule.type === "layer-block") {
@@ -1463,12 +1498,14 @@ const compileVirtual = async ({ css, cssPath, platform, themes, polyfills, debug
       serializeJSObject(scopedVars2, (key, value) => `get "${key}"() { return ${value} }`)
     ])
   );
+  const varsWithMediaQueries = Object.entries(Processor.varsWithMediaQueries).map(([key, value]) => `["${key}", ${serialize(value)}]`).join(",");
   const serializedScopedVars = Object.entries(scopedVars).map(([scopedVarsName, scopedVars2]) => `"${scopedVarsName}": ({ ${scopedVars2} }),`).join("");
   const currentColorVar = `get currentColor() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' },`;
   return [
     "({",
     `scopedVars: ({ ${serializedScopedVars} }),`,
     `vars: ({ ${currentColorVar} ${vars} }),`,
+    `varsWithMediaQueries: ([ ${varsWithMediaQueries} ]),`,
     `stylesheet: ({ ${stylesheet} }),`,
     "})"
   ].join("");

package/dist/module/components/native/react-native-gesture-handler/BaseButton.d.ts

@@ -0,0 +1,3 @@
+import { BaseButtonProps } from 'react-native-gesture-handler';
+export declare const BaseButton: import("react").ForwardRefExoticComponent<Omit<BaseButtonProps, "innerRef"> & import("react").RefAttributes<import("react").ComponentType<{}>>>;
+export default BaseButton;

package/dist/module/components/native/react-native-gesture-handler/BaseButton.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { BaseButton as RNGHBaseButton } from "react-native-gesture-handler";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const BaseButton = copyComponentProperties(RNGHBaseButton, (props) => {
+  const style = useStyle(props.className);
+  return /* @__PURE__ */ jsx(
+    RNGHBaseButton,
+    {
+      ...props,
+      style: [style, props.style]
+    }
+  );
+});
+export default BaseButton;

package/dist/module/components/native/react-native-gesture-handler/BorderlessButton.d.ts

@@ -0,0 +1,3 @@
+import { BorderlessButtonProps } from 'react-native-gesture-handler';
+export declare const BorderlessButton: import("react").ForwardRefExoticComponent<Omit<BorderlessButtonProps, "innerRef"> & import("react").RefAttributes<import("react").ComponentType<{}>>>;
+export default BorderlessButton;

package/dist/module/components/native/react-native-gesture-handler/BorderlessButton.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { BorderlessButton as RNGHBorderlessButton } from "react-native-gesture-handler";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const BorderlessButton = copyComponentProperties(
+  RNGHBorderlessButton,
+  (props) => {
+    const style = useStyle(props.className);
+    return /* @__PURE__ */ jsx(
+      RNGHBorderlessButton,
+      {
+        ...props,
+        style: [style, props.style]
+      }
+    );
+  }
+);
+export default BorderlessButton;

package/dist/module/components/native/react-native-gesture-handler/DrawerLayoutAndroid.d.ts

@@ -0,0 +1,5 @@
+import { DrawerLayoutAndroidProps } from 'react-native';
+export declare const DrawerLayoutAndroid: import("react").ForwardRefExoticComponent<DrawerLayoutAndroidProps & {
+    children?: React.ReactNode | undefined;
+} & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
+export default DrawerLayoutAndroid;

package/dist/module/components/native/react-native-gesture-handler/DrawerLayoutAndroid.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { DrawerLayoutAndroid as RNGHDrawerLayoutAndroid } from "react-native-gesture-handler";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const DrawerLayoutAndroid = copyComponentProperties(
+  RNGHDrawerLayoutAndroid,
+  (props) => {
+    const style = useStyle(props.className);
+    return /* @__PURE__ */ jsx(
+      RNGHDrawerLayoutAndroid,
+      {
+        ...props,
+        style: [style, props.style]
+      }
+    );
+  }
+);
+export default DrawerLayoutAndroid;

package/dist/module/components/native/react-native-gesture-handler/FlatList.d.ts

@@ -0,0 +1,4 @@
+import { FlatListProps } from 'react-native';
+import { FlatList as RNGHFlatList } from 'react-native-gesture-handler';
+export declare const FlatList: <ItemT = any>(props: import("react").PropsWithChildren<Omit<FlatListProps<ItemT>, "renderScrollComponent"> & import("react").RefAttributes<RNGHFlatList<ItemT>> & import("react-native-gesture-handler").NativeViewGestureHandlerProps>, ref?: import("react").ForwardedRef<RNGHFlatList<ItemT>>) => import("react").ReactElement | null;
+export default FlatList;

package/dist/module/components/native/react-native-gesture-handler/FlatList.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { FlatList as RNGHFlatList } from "react-native-gesture-handler";
+import { useUniwindAccent } from "../../../hooks/index.js";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const FlatList = copyComponentProperties(RNGHFlatList, (props) => {
+  const style = useStyle(props.className);
+  const styleColumnWrapper = useStyle(props.columnWrapperClassName);
+  const styleContentContainer = useStyle(props.contentContainerClassName);
+  const styleListFooterComponent = useStyle(props.ListFooterComponentClassName);
+  const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName);
+  const endFillColor = useUniwindAccent(props.endFillColorClassName);
+  const hasSingleColumn = !("numColumns" in props) || props.numColumns === 1;
+  return /* @__PURE__ */ jsx(
+    RNGHFlatList,
+    {
+      ...props,
+      style: [style, props.style],
+      columnWrapperStyle: hasSingleColumn ? void 0 : [styleColumnWrapper, props.columnWrapperStyle],
+      contentContainerStyle: [styleContentContainer, props.contentContainerStyle],
+      ListFooterComponentStyle: [styleListFooterComponent, props.ListFooterComponentStyle],
+      ListHeaderComponentStyle: [styleListHeaderComponent, props.ListHeaderComponentStyle],
+      endFillColor: props.endFillColor ?? endFillColor
+    }
+  );
+});
+export default FlatList;

package/dist/module/components/native/react-native-gesture-handler/GestureHandlerRootView.d.ts

@@ -0,0 +1,3 @@
+import { GestureHandlerRootView as RNGestureHandlerRootView } from 'react-native-gesture-handler';
+export declare const GestureHandlerRootView: typeof RNGestureHandlerRootView;
+export default GestureHandlerRootView;

package/dist/module/components/native/react-native-gesture-handler/GestureHandlerRootView.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { GestureHandlerRootView as RNGestureHandlerRootView } from "react-native-gesture-handler";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const GestureHandlerRootView = copyComponentProperties(
+  RNGestureHandlerRootView,
+  (props) => {
+    const style = useStyle(props.className);
+    return /* @__PURE__ */ jsx(
+      RNGestureHandlerRootView,
+      {
+        ...props,
+        style: [style, props.style]
+      }
+    );
+  }
+);
+export default GestureHandlerRootView;

package/dist/module/components/native/react-native-gesture-handler/Pressable.d.ts

@@ -0,0 +1,3 @@
+import { PressableProps } from 'react-native-gesture-handler';
+export declare const Pressable: (props: PressableProps) => React.JSX.Element;
+export default Pressable;

package/dist/module/components/native/react-native-gesture-handler/Pressable.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Pressable as RNGHPressable } from "react-native-gesture-handler";
+import { UniwindStore } from "../../../core/native/index.js";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const Pressable = copyComponentProperties(RNGHPressable, (props) => {
+  const style = useStyle(props.className, {
+    isDisabled: Boolean(props.disabled)
+  });
+  return /* @__PURE__ */ jsx(
+    RNGHPressable,
+    {
+      ...props,
+      style: (state) => {
+        if (state.pressed) {
+          return [
+            UniwindStore.getStyles(
+              props.className,
+              { isDisabled: Boolean(props.disabled), isPressed: true }
+            ).styles,
+            typeof props.style === "function" ? props.style(state) : props.style
+          ];
+        }
+        return [style, typeof props.style === "function" ? props.style(state) : props.style];
+      }
+    }
+  );
+});
+export default Pressable;

package/dist/module/components/native/react-native-gesture-handler/PureNativeButton.d.ts

@@ -0,0 +1,3 @@
+import { RawButtonProps } from 'react-native-gesture-handler';
+export declare const PureNativeButton: import("react-native").HostComponent<RawButtonProps>;
+export default PureNativeButton;

package/dist/module/components/native/react-native-gesture-handler/PureNativeButton.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { PureNativeButton as RNGHPureNativeButton } from "react-native-gesture-handler";
+import { copyComponentProperties } from "../../utils.js";
+import { useStyle } from "../useStyle.js";
+export const PureNativeButton = copyComponentProperties(RNGHPureNativeButton, (props) => {
+  const style = useStyle(props.className);
+  return /* @__PURE__ */ jsx(
+    RNGHPureNativeButton,
+    {
+      ...props,
+      style: [style, props.style]
+    }
+  );
+});
+export default PureNativeButton;

package/dist/module/components/native/react-native-gesture-handler/RawButton.d.ts

@@ -0,0 +1,3 @@
+import { RawButtonProps } from 'react-native-gesture-handler';
+export declare const RawButton: import("react").ForwardRefExoticComponent<RawButtonProps & import("react-native-gesture-handler").NativeViewGestureHandlerProps & import("react").RefAttributes<import("react").ComponentType<any>>>;
+export default RawButton;